how to make conditional with props and react dynamic theme? - javascript

I need to set the border on the hover of my checkbox, but when it is checked activated, that border on the hover does not exist. I have a file with tokens, how can I pass that border through them dynamically?
I would like it to be like this, with this borders.borderWidthThin being searched in my file
but this is giving error, I'm using styled components
&:hover {
border: ${(props) => (props.checked ? 'none' : '${borders.borderWidthThin}')};
cursor: pointer;
}

I'm able to do this without using the props arrow function as so:
&:checked:hover {
border-color: red;
cursor: pointer;
}
It will only display if the box is checked and hovered. But if you want to use the prop function you can do this:
&:checked:hover {
border: ${props => props.checked ? 'red' : `${borders.borderWidthThin}`};
cursor: pointer;
}

Related

How to instantiate different instances of a svelte component in a single parent component every time the child component is used?

I am creating a custom select menu in svelte and have encountered an issue while trying to edit the transform property of the downward icon for the select menu.
I am creating a form with multiple select menus imported to one parent component. Whilst clicking on the second select menu box used in a parent component file, only the first select menu box's icon gets transformed, while no change occurs in the position of the icon of the second select menu box.
I think that this is because both the imported components(select menu) share the same class during compilation. If my assumption is correct, is there any way to instantiate an instance of the select menu component in the parent component every time the select component is used?
<script>
export let displayText;
let clickCount = 0;
</script>
<div
class="selection"
on:click={() => {
clickCount++;
clickCount == 1
? (document.querySelector(".arrow").style.transform = "rotate(180deg)")
: (document.querySelector(".arrow").style.transform = "rotate(0deg)");
clickCount == 2 ? (clickCount = 0) : (clickCount = clickCount);
}}
>
<span>{displayText}</span>
<div class="arrow" />
</div>
<style>
.selection {
display: flex;
border-radius: 5px;
padding-left: 10px;
padding: 10px;
font-weight: bold;
background-color: #363636;
font-size: 14px;
align-items: center;
cursor: pointer;
}
.selection .arrow {
transition: all 0.5s;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid white;
margin-left: 10px;
}
</style>
The problem is the document.querySelector(".arrow") that will always find the first element with the class. Svelte has other tools to avoid that and target and manipulate element inside the component without querying the DOM. Here you can use the class: directive
REPL
<script>
export let displayText;
let open = false
</script>
<div class="selection"
on:click={() => open = !open}
>
<span>{displayText} - open = {open}</span>
<div class="arrow"
class:rotated={open}
/>
</div>
<style>
.selection {
...
}
.selection .arrow {
...
}
.rotated {
transform: rotate(180deg);
}
</style>

Hide slider thumb in material-ui library

I'm trying to hide the slide thumb. I tried to do it without using a library but then I think that it should be better to use material-ui because maybe it would be easier but I'm here asking help.
Here is my code:
import * as React from "react";
import Slider from "#mui/material/Slider";
import "./style.css";
export default function ContinuousSlider() {
const [value, setValue] = React.useState(30);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Slider
aria-label="Volume"
value={value}
onChange={handleChange}
focusVisible={false}
/>
);
}
style:
.MuiSlider-thumb {
background-color: orange;
box-shadow: none;
width: 0px;
height: 0px;
}
.MuiSlider-rail {
background-color: orange;
border: none;
}
.MuiSlider-track {
background-color: red;
border: none;
}
.MuiSlider-rail {
background-color: green;
}
working code here
result:
on focus
I was able to hide the main thumb but not the "secondary thumb". I don't know how to call it, the light blue one that appears clicking on the thumb.
How can I remove it?
I want the following style always, even when user drag the thumb:
You could add style override for hover (pseudo-class) and active state (for MUI it is .Mui-active)
.MuiSlider-thumb:is(:hover, .Mui-active) {
display: none;
}
Demo

Changing the inner colour of the react bootstrap ProgressBar

Currently, I am using the React-bootstrap ProgressBar in my code in the following way:
<ProgressBar now={20} className="green-progress-bar" height="1px" style={{ height: "30.82px", margin:"10px 0px 10px 0px"}}/>
And in my CSS file, I have something like this:
.green-progress-bar .progress-bar{
height: 100%;
border: 1px solid #FFFFFF;
border-radius: 19.5px;
padding-right: 5px;
// I am aware I can do background-color: green;
// but I want to change it within the JS file
}
I would like to change the colour of the actual bar itself, but my attempts don't seem to be working.
For example, I tried:
<ProgressBar now={20} className="green-progress-bar" height="1px" style={{ height: "30.82px", margin:"10px 0px 10px 0px", "background-colour":"green"}}/>
But this just seems to be changing the outer ProgressBar container as opposed to the actual bar.
Here is a link to the documentation page.
NOTE: I am aware that I can put something like background-color: green; in my CSS file, but I am looking for a solution that changes it within the JS file so that I can later use a variable to change the bar colour.
If you have ref to your bar component you can find it's child by class and then change its color.
useEffect(() => {
if (ref.current) {
const inner = ref.current.querySelector(".progress-bar");
if ( inner ) {
inner.style.backgroundColor = "green";
}
}
}, [ref]);
<ProgressBar ref={ref} now={20} /* other stuff */ />

Make so that div changes color for a brief time when clicked

I've got a setup where I'm using divs as buttons, and when they're clicked they add to ingredients to my burger.
JS:
<div id="ingredientBox">
<Ingredient
ref="ingredient"
v-for="item in currentIngredients"
v-on:increment="addToBurger(item)"
:item="item"
:lang="lang"
:ui-labels="uiLabels"
:key="item.ingredient_id">
</Ingredient>
</div>
With CSS:
.ingredient {
border: 1px solid #f5f5f28a;
padding: 0.8em;
width: 23vh;
height: 19vh;
background-color: green;
border-radius: 25px;
margin: 10px;
text-align: center;
}
I now want the div to react visually when clicked (maybe change color for like 0.2 seconds or something. I've looked around and only find info on how to change color permanently, is there a simple way of changing the color for just a brief moment?
You can use CSS keyframe animation to pull this off:
#keyframes animate-burger-button {
0% {
background: red;
}
50% {
background: yellow;
}
100% {
background: green;
}
}
#ingredientBox:active {
animation: animate-burger-button 0.8s forwards;
}
I would also add another note to try and use a button instead of a div, make accessibility a lot easier.
You could do something like
#ingredientBox:active {
color: red;
}
You could use setTimeout to add a class to the button and then remove it.
code:
buttonTrigger() {
element.classList.add('somesyle'); // add colour changing class to element
setTimeout(() => {
element.classList.remove('somestyle'); //remove the class after 0.2 seconds
}, 200)
}
EDIT
I was going to also suggest using CSS keyframes but #AlexanderKaran already suggested it. That is a good option too.

Hover on parent but not on child element

I have an issue where I want to activate hover state on a link when hovering on the container anywhere but except on two buttons save and close. CSS approach is preferred but if not vanilla JavaScript would be fine. Please have have look I have created a codepen
You can not trigger pseudo events. you can give it same styling when the box is hovered:
.box {
display: flex;
padding: 20px;
border-bottom: 1px solid #ccc;
transition: background .3s ease-in-out;
&:hover {
background: #f1f1f1;
a {
color: #525199;
background-color: #e6e6f0;
border-color: #525199;
}
}
This is not possible with pure CSS, as explained on the question How to style the parent element when hovering a child element?
The solution, then, is to add some Javascript to style the parent element, for example by adding a class to the parent element. A simple code snippet to achieve this with your solution, would be the following:
document.querySelectorAll('.save, .cancel').forEach(function(button) {
button.addEventListener("mouseover", function() {
button.parentNode.parentNode.className = 'box nohover';
});
button.addEventListener("mouseout", function() {
button.parentNode.parentNode.className = 'box';
});
});
And you'd then need to style the {{nohover}} class by not changing the background:
.nohover:hover {
background: none;
}
See this codepen for a working demo.
try this:
.box:hover :not(.box--right):hover a {
color: #525199;
background-color: #e6e6f0;
border-color: #525199;
}

Categories