Skip to content

added css variables #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wcski merged 1 commit into from
Oct 7, 2017
Merged

added css variables #5

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
added css variables
  • Loading branch information
RELIAS\wcoleman committed Oct 7, 2017
commit d35c2a5ed169563c031e13a3494dd41a4b8dd48e
26 changes: 26 additions & 0 deletions 03 - CSS Variables/index-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>

<style>

:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}

img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}

.hl {
color: var(--base);
}
/*
misc styles, nothing to do with CSS variables
*/
Expand All @@ -45,6 +60,17 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
</style>

<script>

const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
const suffix = this.dataset.sizing || '';
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

</script>

</body>
Expand Down