Develop Reference

how to define breakpoints in elevation prop in Paper In MUI

I am using MUI5 in my Project. Its great. I have designed a login page. In the Page, I have used Paper Component
In the Paper Component, I want to define Elevation. I can define it using this
<Paper elevation={7}>
It works. But My need was. For mobile screen/Tab screen, I don't want elevation.So I did like this
<Paper elevation={{md:7}}>
But it's not working. Please Help me with some solutions
Here's the Code in my Sand Box
https://codesandbox.io/s/loginpage-6ko3qs?file=/src/App.js

Welcome to Stackoverflow #sameho
The Paper's elevation prop simply maps Material UI's theme.shadows to box-shadow based on the number.
So you can do this instead of using elevation altogether:
<Paper
sx={{
width: 500,
height: 300,
backgroundColor: "white",
padding: 5,
pb: 10,
boxShadow: { xs: "none", md: "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)" }
}}
>
.....
</Paper>
Sandbox: https://codesandbox.io/s/loginpage-forked-zdijmv?file=/src/App.js
These are all the boxShadow attributes that MUI uses for their elevation prop:
0: "none"
1: "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)"
2: "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)"
3: "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)"
4: "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)"
5: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
6: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"
7: "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)"
8: "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)"
9: "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)"
10: "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)"
11: "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)"
12: "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)"
13: "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)"
14: "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)"
15: "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)"
16: "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)"
17: "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)"
18: "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)"
19: "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)"
20: "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)"
21: "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)"
22: "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)"
23: "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)"
24: "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)"

How to change font family + background when hovering over each letter

Hovering over each letter of the given text will change the entire font of the text + body background color. I have tried but my attempts have failed. Instead, the font only changes for the letters after the one that is being hovered, and I don't even know how to affect the body background color from within the div selectors.
.hero-name div {
font-family: 'Train One', cursive;
display: inline;
position: relative;
font-size: 10vmin;
}
.hero-name div:first-of-type:hover,
.hero-name div:first-of-type:hover~div {
color: #ffffff;
text-shadow: 0 0.1vmin 0 #dba1a1, 0 0.2vmin 0 #d89999, 0 0.3vmin 0 #d59292, 0 0.4vmin 0 #d28a8a, 0 0.5vmin 0 #cf8383, 0 0.6vmin 0 #cd7c7c, 0 0.7vmin 0 #ca7474, 0 0.8vmin 0 #c76d6d, 0 0 0.5vmin rgb(230 139 139 / 5%), 0 -0.1vmin 0.3vmin rgb(230 139 139 / 20%), 0 0.9vmin 9vmin rgb(230 139 139 / 30%), 0 1.2vmin 1.2vmin rgb(230 139 139 / 30%), 0 1.5vmin 1.5vmin rgb(230 139 139 / 30%);
}
.hero-name div:nth-child(2):hover,
.hero-name div:nth-child(2):hover~div {
font-family: 'Anton', sans-serif;
color: #d9d9d9;
text-shadow: -1px -1px 1px rgba(255, 255, 255, .1), 1px 1px 1px rgba(0, 0, 0, .5);
}
.hero-name div:nth-child(3):hover,
.hero-name div:nth-child(3):hover~div {
font-family: 'Anton', sans-serif;
color: #bc2e1e;
background-color: #edde9c;
text-shadow: 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd, 3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 4px 5px 3px #378ab4, 5px 4px 2px #5dabcd, 5px 6px 2px #378ab4, 6px 5px 2px #5dabcd, 6px 7px 1px #378ab4, 7px 6px 1px #5dabcd, 7px 8px 0px #378ab4, 8px 7px 0px #5dabcd;
}
.hero-name div:nth-child(4):hover,
.hero-name div:nth-child(4):hover~div {
font-family: 'Anton', sans-serif;
color: #e0eff2;
background: #3a50d9;
font: italic bold Georgia, Serif;
text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}
<section id="banner">
<div class="hero-name">
<div>Y</div>
<div>O</div>
<div>U</div>
<div>R</div>
<div></div>
<div>N</div>
<div>A</div>
<div>M</div>
<div>E</div>
<div class="hero-pro">
<h2>Title Here</h2>
</div>
</div>
</section>
Any solutions? JavaScript welcome.

like I mentioned in my comment, it's not possible to select previous siblings or parents with pure css..
there are multiple ways to go about this. in this example we define the different text styles as classes and store them in the dataset of the dedicated letter markup.
we then add a hover listener to the letters( a bit sloppy in this example as we do that with the 'hero-pro' element aswell, which is unnecessary ).
later when the hover event fires we retrieve the class from the target letter dataset and apply it to the root element
I modified your code a bit, assuming I understood you correctly you're after something like this?
const banner = document.getElementById('banner');
const divs = [].slice.call(banner.children[0].children);
let currentClass = 'init';
const addClass = event => {
let el = event.target;
banner.classList?.remove(currentClass);
currentClass = el.dataset.class;
banner.classList.add(currentClass);
}
divs.forEach(div => document.addEventListener('mouseover', addClass));
.hero-name div {
font-family: 'Train One', cursive;
display: inline;
position: relative;
font-size: 10vmin;
}
.class1 .hero-name div {
color: #ffffff;
text-shadow: 0 0.1vmin 0 #dba1a1, 0 0.2vmin 0 #d89999, 0 0.3vmin 0 #d59292, 0 0.4vmin 0 #d28a8a, 0 0.5vmin 0 #cf8383, 0 0.6vmin 0 #cd7c7c, 0 0.7vmin 0 #ca7474, 0 0.8vmin 0 #c76d6d, 0 0 0.5vmin rgb(230 139 139 / 5%), 0 -0.1vmin 0.3vmin rgb(230 139 139 / 20%), 0 0.9vmin 9vmin rgb(230 139 139 / 30%), 0 1.2vmin 1.2vmin rgb(230 139 139 / 30%), 0 1.5vmin 1.5vmin rgb(230 139 139 / 30%);
}
.class2 .hero-name div {
font-family: 'Anton', sans-serif;
color: #d9d9d9;
text-shadow: -1px -1px 1px rgba(255, 255, 255, .1), 1px 1px 1px rgba(0, 0, 0, .5);
}
.class3 .hero-name div {
font-family: 'Anton', sans-serif;
color: #bc2e1e;
background-color: #edde9c;
text-shadow: 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd, 3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 4px 5px 3px #378ab4, 5px 4px 2px #5dabcd, 5px 6px 2px #378ab4, 6px 5px 2px #5dabcd, 6px 7px 1px #378ab4, 7px 6px 1px #5dabcd, 7px 8px 0px #378ab4, 8px 7px 0px #5dabcd;
}
.class4 .hero-name div {
font-family: 'Anton', sans-serif;
color: #e0eff2;
background: #3a50d9;
font: italic bold Georgia, Serif;
text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}
<section id="banner">
<div class="hero-name">
<div data-class="class1">Y</div>
<div data-class="class2">O</div>
<div data-class="class3">U</div>
<div data-class="class4">R</div>
<div></div>
<div>N</div>
<div>A</div>
<div>M</div>
<div>E</div>
<div class="hero-pro">
<h2>Title Here</h2>
</div>
</div>
</section>

Class combination not applying new style

I have a svelte button that is defined as so:
<span class="nav-button" on:click={e => setActive(e.target,"nav-button")}>
...
</span>
When the setActive() function below is run to apply the .active class:
// Toggles the active status of an element
function setActive(e, bubble?:string) {
// Optionally bubbles to spesified parent element
if(bubble) while(!e.classList.contains(bubble)) e = e.parentElement;
(e.classList.contains("active"))? e.classList.remove("active"):e.classList.add("active");
}
It adds the .active class, but it does not add the style.
.nav-button is defined in SCSS as:
.nav-button {
box-shadow: -7px -7px 20px 0px var(--shadow-primary),
-4px -4px 5px 0px var(--shadow-primary),
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001,
inset 0px 0px 0px 0px var(--shadow-primary),
inset 0px 0px 0px 0px #0001,
inset 0px 0px 0px 0px var(--shadow-primary),
inset 0px 0px 0px 0px #0001;
transition:box-shadow 0.25s cubic-bezier(.79,.21,.06,.81);
&.active {
box-shadow: 0px 0px 0px 0px var(--shadow-primary),
0px 0px 0px 0px var(--shadow-primary),
0px 0px 0px 0px #0001,
0px 0px 0px 0px #0001,
inset -7px -7px 20px 0px var(--shadow-primary),
inset -4px -4px 5px 0px var(--shadow-primary),
inset 7px 7px 20px 0px #0003,
inset 4px 4px 5px 0px #0001 !important;
}
}
See here, for video example.
If anyone could lend me some help, it would be greatly appreciated!

A big thank you to #dagalti for the answer!
The .nav-button class must be changed to:
:global(.nav-button) {
box-shadow: -7px -7px 20px 0px var(--shadow-primary),
-4px -4px 5px 0px var(--shadow-primary),
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001,
inset 0px 0px 0px 0px var(--shadow-primary),
inset 0px 0px 0px 0px #0001,
inset 0px 0px 0px 0px var(--shadow-primary),
inset 0px 0px 0px 0px #0001;
transition:box-shadow 0.25s cubic-bezier(.79,.21,.06,.81);
&.active {
box-shadow: 0px 0px 0px 0px var(--shadow-primary),
0px 0px 0px 0px var(--shadow-primary),
0px 0px 0px 0px #0001,
0px 0px 0px 0px #0001,
inset -7px -7px 20px 0px var(--shadow-primary),
inset -4px -4px 5px 0px var(--shadow-primary),
inset 7px 7px 20px 0px #0003,
inset 4px 4px 5px 0px #0001 !important;
}
}
You can see the working example here.

The reason you need the :global is because the compiler sees that the .active class is not used anywhere in the markup and it will remove it, adding the :global modifier tells the compiler: this class is applied somewhere that you cannot see, pleas keep it.
Note that using the :global method will also remove the scope from your styling, meaning that if this class appears elsewhere in your project it will also applied there, this is the main reason this is really the last resort.
But for your case you don't need, you just have to embrace Svelte fully.
The first thing to remember is that when working with Svelte, it is generally a bad practice to do DOM manipulation in your JavaScript, instead you should rely on the state of your components to update themselves instead.
That said, you can scrap your setActive function and replace it with a singular variable:
let active
The goal is to simply place in active some kind of identification of the current element. We could simply do this by changing the on:click
<span on:click={() => active = 1}>...</span>
<span on:click={() => active = 2}>...</span>
(change the number with whatever you would want, like a string or an id)
Finally use the conditional classes feature from Svelte
<span class:active={active === 1}>...</span>
Using the notation: class:xxx={condition}> will add the class xxx to your element if condition evaluates to true.
So the total code would be:
<script>
let active
</script>
<span class:active={active === 1} class="nav_button" on:click={() => active = 1}>...</span>
<span class:active={active === 2} class="nav_button" on:click={() => active = 2}>...</span>
<span class:active={active === 3} class="nav_button" on:click={() => active = 3}>...</span>
<style>
/* here your styles */
</style>
This way the class active is actually used in the markup and the compiler will not remove it for you, reducing the risk of applying the same rules elsewhere as the class will still be scoped to this component.
(Personally, I also thinks it makes the code easier to comprehend)

Beveled shadow border

I am trying to do a beveled shadow border in CSS.
Now it works that i have a several images (up left corner, down left, right corner etc...). It is very bad solution of this problem and I beleive a better solution in CSS or JS is possible.
With buttons it doesnt work.
The most important thing, it has to be responsive
In css I tried outset, but it does not work exactly how I want.
EXAMPLE IN IMAGE: example how it should looks like

You can do this with multiple box-shadow properties, for example:
box-shadow:
-1px 1px 0px #ccc,
-2px 2px 0px #ccc,
-3px 3px 0px #ccc,
-4px 4px 0px #ccc,
-5px 5px 0px #ccc,
-6px 6px 0px #ccc,
-7px 7px 0px #ccc,
-8px 8px 0px #ccc,
-9px 9px 0px #ccc,
-10px 10px 0px #ccc
}
Demo example - https://jsfiddle.net/bztexp0z/
body { background-color:#28434E; padding:50px; }
.box {
width:100px;
height:100px;
background-color:#fff;
box-shadow:
-1px 1px 0px #ccc,
-2px 2px 0px #ccc,
-3px 3px 0px #ccc,
-4px 4px 0px #ccc,
-5px 5px 0px #ccc,
-6px 6px 0px #ccc,
-7px 7px 0px #ccc,
-8px 8px 0px #ccc,
-9px 9px 0px #ccc,
-10px 10px 0px #ccc
}
<div class="box">
</div>
You can reduce the thickness by just having -1 to -4 for example.

Finally I work this out. I used pseudo selector :before and :after with skew transformation.
Solution is here: https://gist.github.com/rihot/d4530492dfdbec05db1421fce1d248e6

I have a blinking box, how can I add a gradient to this or program it easier?

I was trying to figure out how to get a blinking box, and as I did not really find a solution on the net, I was fiddling around a bit.
I came up with the following, this works fine in general. My question is simply a) if there is an easier way to do this, and b) if I can program it in a way that it increases / decreases by gradient, instead of me having to program so many classes and stuff like that.
See this code in action: http://jsfiddle.net/ZUJ5b/7/
html
<div id="test" class="test">Hello</div>
jQuery
$(document).ready(function () {
setInterval(blink, 75);
});
function blink() {
if ($('#test').hasClass("test")) {
$("#test").removeClass('test').addClass('test1');
} else if($('#test').hasClass("test1")) {
$("#test").removeClass('test1').addClass('test2');
} else if($('#test').hasClass("test2")) {
$("#test").removeClass('test2').addClass('test3');
} else if($('#test').hasClass("test3")) {
$("#test").removeClass('test3').addClass('test5');
} else if($('#test').hasClass("test4")) {
$("#test").removeClass('test4').addClass('test5');
} else if($('#test').hasClass("test5")) {
$("#test").removeClass('test5').addClass('test6');
} else if($('#test').hasClass("test6")) {
$("#test").removeClass('test6').addClass('test7');
} else {
$("#test").removeClass('test7').addClass('test');
}
}
CSS
.test {
padding: 20px;
width: 100px;
border: 1px #ED0 outset;
box-shadow: 0px 0px 6px 1px #FE4;
-moz-box-shadow: 0px 0px 6px 1px #FE4;
-webkit-box-shadow: 0px 0px 6px 1px #FE4;
}
.test1 {
padding: 20px;
width: 100px;
border: 1px #EED000 outset;
box-shadow: 0px 0px 6px 1px #FFE544;
-moz-box-shadow: 0px 0px 6px 1px #FFE544;
-webkit-box-shadow: 0px 0px 6px 1px #FFE544;
}
.test2 {
padding: 20px;
width: 100px;
border: 1px #EEC300 outset;
box-shadow: 0px 0px 7px 2px #FFDD44;
-moz-box-shadow: 0px 0px 7px 2px #FFDD44;
-webkit-box-shadow: 0px 0px 7px 2px #FFDD44;
}
.test3 {
padding: 20px;
width: 100px;
border: 1px #EEB600 outset;
box-shadow: 0px 0px 7px 2px #FFD444;
-moz-box-shadow: 0px 0px 7px 2px #FFD444;
-webkit-box-shadow: 0px 0px 7px 2px #FFD444;
}
.test4 {
padding: 20px;
width: 100px;
border: 1px #EA0 outset;
box-shadow: 0px 0px 8px 3px #FFCC44;
-moz-box-shadow: 0px 0px 8px 3px #FFCC44;
-webkit-box-shadow: 0px 0px 8px 3px #FFCC44;
}
.test5 {
padding: 20px;
width: 100px;
border: 1px #EEB600 outset;
box-shadow: 0px 0px 7px 2px #FFD444;
-moz-box-shadow: 0px 0px 7px 2px #FFD444;
-webkit-box-shadow: 0px 0px 7px 2px #FFD444;
}
.test6 {
padding: 20px;
width: 100px;
border: 1px #EEC300 outset;
box-shadow: 0px 0px 7px 2px #FFDD44;
-moz-box-shadow: 0px 0px 7px 2px #FFDD44;
-webkit-box-shadow: 0px 0px 7px 2px #FFDD44;
}
.test7 {
padding: 20px;
width: 100px;
border: 1px #EED000 outset;
box-shadow: 0px 0px 6px 1px #FFE544;
-moz-box-shadow: 0px 0px 3px 1px #FFE544;
-webkit-box-shadow: 0px 0px 3px 1px #FFE544;
}

Wow! You're dedicated! There are much easier ways to animate with css. Check out CSS transitions (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions)

It is pretty easy with css transitions (but only for new versions of browser)
Here is demo fiddle
Just add a transition property to your css class and in that define on which property you want to put transition on (in your case border shadow) and also define for how much time you want to make the transition.
transition: box-shadow 1s;