greystate · September 9, 2024 08:16
diff --git a/dabblet.css b/dabblet.css
 /**
 * Testing @property for animating an angle value
 */
 @property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 45deg;
 }

 :root {
 --angle: 16deg;

 background: #f06;
 background: linear-gradient(var(--angle, 45deg), #f06, yellow);
 min-height: 100%;
 transition: --angle 1s linear;

 &:hover {
 	--angle: 120deg;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Testing @property for animating an angle value
	*/
	@property --angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 45deg;
	}

	:root {
	--angle: 16deg;

	background: #f06;
	background: linear-gradient(var(--angle, 45deg), #f06, yellow);
	min-height: 100%;
	transition: --angle 1s linear;

	&:hover {
	--angle: 120deg;
	}