Class combination not applying new style

Class combination not applying new style - javascript

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)

Related

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)"

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

CSS Box Shadow Like This Website

I have the current CSS box shadow code which I'm trying to imitate the effects of this website http://danielladraper.com/
-webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
http://jsfiddle.net/GCwBT/
If you scroll down to the bottom of that site and hover over one of their products, you'll see that a box shadow appears over one of the products. However when I apply this to my div's, which are floated next to each other, only part of the the box shadow is visible, the other portion seems to get blocked.
I have no idea why this is happening, even though both of our divs appear to be floating left.
Anyone able to tell me what sort of js/css combo that site is using to achieve that CSS shadow effect?
Thanks

You have to consider that box-shadow only appears when the user hovers the box.
In your jsfiddle, all the boxes have shadow. You have to change it to:
.boxes {
width: 200px;
height: 200px;
float: left;
background-color: #ccc;
border-style: solid;
border-width: 1px;
border-color: #fff;
position: relative;
}
.boxes:hover {
-webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
z-index: 999;
}
The z-index property brings the box to front. And it works with position:relative (or any others, you need position:relative)
Regards.

Your shadow must be blocking because you are not using z-index, along with this css you also need to specify the z-index when you hover.
.boxes:hover{
-webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
z-index:10;
}
JSFIDDLE
P.S. For your case position:relative property is required to bring z-index in effect

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;

distinguish one page from other in html

I think the title is misleading..as i couldnt think of an appropiate title.
I have 4 webpages which i want to demo..
[page1] [page2] [page3] [page4]
What I want is.. on top of all my pages.. have like 4 of these "buttons" (or something else)
When I am on page 1..page 1 button is bold and rest of the three are light..
When I am on page 2.. page 2 button is bold and so on..
And that each of them link to each other.
Any suggestions

<style>
button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #123d54;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#afd9fa 0%,
#588fad);
background: -webkit-gradient(
linear, left top, left bottom,
from(#afd9fa),
to(#588fad));
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #003366;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.7),
0px 1px 0px rgba(255,255,255,0.3);
}
button.current {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#faafaf 0%,
#d11919);
background: -webkit-gradient(
linear, left top, left bottom,
from(#faafaf),
to(#d11919));
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #003366;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.7),
0px 1px 0px rgba(255,255,255,0.3);
}
</style>
<a href="/page1.html">
<button class="current">Demo Page 1</button>
</a>
<a href="/page1.html">
<button class="">Demo Page 2</button>
</a>
<a href="/page1.html">
<button class="">Demo Page 3</button>
</a>
<a href="/page1.html">
<button class="">Demo Page 4</button>
</a>
copy the above at the top of each page you have, for the first page, the button class should be current, for the second one the second button should be current and so forth.
The buttons were generated CSS3 buttons for illustration purposes

Develop Reference

JavaScript is the programming language of the Web.

Class combination not applying new style - javascript

Related

how to define breakpoints in elevation prop in Paper In MUI

Beveled shadow border

CSS Box Shadow Like This Website

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

distinguish one page from other in html

Categories

Resources