Remove rogue double dash from opacity CSS property name

pull/7622/head
Kyle Rader 4 years ago
parent 9635a2e413
commit 65a13a06a0
No known key found for this signature in database
GPG Key ID: FB5C898DD18B6E1B

@ -10,6 +10,6 @@
<style> <style>
p { p {
font-family: "Comic Sans MS", cursive; font-family: "Comic Sans MS", cursive;
background: rgba(255, 62, 0, var(--opacity)); background: rgba(255, 62, 0, var(opacity));
} }
</style> </style>

@ -5,11 +5,11 @@
<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} /> <input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p> <p style="color: {color}; opacity: {bgOpacity};">This is a paragraph.</p>
<style> <style>
p { p {
font-family: "Comic Sans MS", cursive; font-family: "Comic Sans MS", cursive;
background: rgba(255, 62, 0, var(--opacity)); background: rgba(255, 62, 0, var(opacity));
} }
</style> </style>

@ -5,6 +5,6 @@ title: Inline styles
Apart from adding styles inside style tags, you can also add styles to individual elements using the style attribute. Usually you will want to do styling through CSS, but this can come in handy for dynamic styles, especially when combined with CSS custom properties. Apart from adding styles inside style tags, you can also add styles to individual elements using the style attribute. Usually you will want to do styling through CSS, but this can come in handy for dynamic styles, especially when combined with CSS custom properties.
Add the following style attribute to the paragraph element: Add the following style attribute to the paragraph element:
`style="color: {color}; --opacity: {bgOpacity};"` `style="color: {color}; opacity: {bgOpacity};"`
Great, now you can style the paragraph using variables that change based on your input without having to make a class for every possible value. Great, now you can style the paragraph using variables that change based on your input without having to make a class for every possible value.

@ -5,11 +5,11 @@
<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} /> <input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p> <p style="color: {color}; opacity: {bgOpacity};">This is a paragraph.</p>
<style> <style>
p { p {
font-family: "Comic Sans MS", cursive; font-family: "Comic Sans MS", cursive;
background: rgba(255, 62, 0, var(--opacity)); background: rgba(255, 62, 0, var(opacity));
} }
</style> </style>

@ -5,11 +5,11 @@
<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} /> <input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
<p style:color style:--opacity={bgOpacity}>This is a paragraph.</p> <p style:color style:opacity={bgOpacity}>This is a paragraph.</p>
<style> <style>
p { p {
font-family: "Comic Sans MS", cursive; font-family: "Comic Sans MS", cursive;
background: rgba(255, 62, 0, var(--opacity)); background: rgba(255, 62, 0, var(opacity));
} }
</style> </style>

@ -9,7 +9,7 @@ Change the style attribute of the paragraph to the following:
```html ```html
<p <p
style:color style:color
style:--opacity="{bgOpacity}" style:opacity="{bgOpacity}"
> >
``` ```

Loading…
Cancel
Save