fullstack/fullstack-gatsby-theme-bch-wallet
1
0
Fork 0
mirror of https://github.com/fullstack-cash/fullstack-gatsby-theme-bch-wallet.git synced 2026-09-21 16:52:06 -07:00
Code Issues Packages Projects Releases Wiki Activity

Minor edit

Browse Source
This commit is contained in:
Chris Troutner
2020-08-08 07:55:43 -07:00
parent bc60aa1c84
commit e883113f1b
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/visual-settings.md
+10 -10
View File
@@ -4,20 +4,20 @@
# Setup
> We can stablish global CSS variables that would allow us to use
> those variables in the different components, to make them
> We can establish global CSS variables that would allow us to use
> those variables in the different components, to make them
> customizable and dynamic
### Example:
```
```
const myColor = 'black'
const footerH = '500px'
const styles = document.documentElement.style
styles.setProperty('--main-color', myColor)
styles.setProperty('--footer-height', footerH)
```
This way we can create dynamic variables to change different CSS
properties, to see the use of the global variables we can check
This way we can create dynamic variables to change different CSS
properties, to see the use of the global variables we can check
the the [/components/app-colors.css](https://github.com/Permissionless-Software-Foundation/gatsby-ipfs-web-wallet/blob/master/src/components/app-colors.css)
### Example:
@@ -26,7 +26,7 @@ the the [/components/app-colors.css](https://github.com/Permissionless-Software-
body[0].style.fontFamily = 'Courier New'
body[0].style.fontSize = '25px'
```
This way we could change some styles of everything covered by the `<body>`
This way we could change some styles of everything covered by the `<body>`
tag, it is basically the whole app.
### Example:
@@ -36,16 +36,16 @@ The following example is to customize the color of the warning message:
:root {
--warning-alert-bg-color:'red';
--warning-alert-txt-color:'white';
}
# layout.css
.version-status div{
color: var(--warning-alert-txt-color);
background-color: var(--warning-alert-bg-color);
}
# JS
// We change the values of the CSS variables
const styles = document.documentElement.style