Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 958c4d9

Browse files
chapter 2 - 2.5 examples uploaded
chapter 2 - 2.5 examples uploaded
1 parent af25dc4 commit 958c4d9

5 files changed

+104
-8
lines changed

‎_examples-css-variables/2.1-style-css-var-demo-managing-colors-themes.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
:root {
22
/* define/set variables */
33
--main-font-family: Verdana;
4-
--main-theme-color: #ff7f50;
4+
--main-theme-color: #ff7f50;/* #ff7f50; #ffc150; #ff50d1; #5250ff; */
55
--main-line-height: 2;
66
}
77

‎_examples-css-variables/2.3-css-var-demo-transform-transition.html

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,7 @@
1818

1919
<h1 class="top-heading-text" id="topHeadingText">2. CSS Variable Demo</h1>
2020

21-
<h2 class="subheading-text" id="subHeadingText">2.3 - Hover effect with Fallback support</h2>
22-
23-
<!-- <article class="info-text">
24-
- Any CSS variables defined in the stylesheet can be `accessed` by using `var()` function <br/>
25-
- The CSS `var()` function can be used to insert the value of a custom property or a CSS variable <br/>
26-
- The var() function cannot be used in any property names, selectors or anything else besides property values setting or providing fallback value support<br/> <br/>
27-
</article> -->
21+
<h2 class="subheading-text" id="subHeadingText">2.3 - Hover effect with Transform and Transition</h2>
2822

2923
<nav class="button-container">
3024
<div class="button btn-default">btn-default </div>
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<title>2.5-css-var-demo-javascript-theme-switcher.html</title>
10+
11+
<link rel="stylesheet" href="2.5-style-css-var-demo-javascript-theme-switcher.css">
12+
13+
</head>
14+
15+
<body>
16+
17+
<div class="container">
18+
19+
<nav class="swatches-container">
20+
<div style="background-color:#8a2be2;"></div>
21+
<div style="background-color:#ed143d;"></div>
22+
<div style="background-color:#ff8c00;"></div>
23+
<div style="background-color:#00ced1;"></div>
24+
<div style="background-color:#000080;"></div>
25+
</nav>
26+
27+
<h1 class="top-heading-text" id="topHeadingText">2. CSS Variable Demo</h1>
28+
29+
<h2 class="subheading-text" id="subHeadingText">2.5 - CSS Variable JavaScript Theme Switcher</h2>
30+
31+
<div class="content-container">
32+
33+
<article class="info-text">
34+
The benefits of using variables in CSS are not that much different than from those of using variables in any other programming languages (define/initiate once and use when required). <br/> <br/>
35+
The beauty of variables is that they let you store your valuables/properties in one place and update it on the fly for several various purposes. <br/>
36+
</article>
37+
38+
<footer class="footer-text">This is footer Text</footer>
39+
40+
</div>
41+
42+
</div>
43+
44+
<script src="./2.5-script-variables-javascript-theme-switcher.js"></script>
45+
46+
</body>
47+
48+
</html>
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
console.log('in 2.5-script-variables-javascript-theme-switcher.js');
2+
3+
// get the root element
4+
var root = document.querySelector(':root');
5+
6+
// get swatches
7+
var swatches = document.querySelectorAll('.swatches-container div');
8+
9+
swatches.forEach((curSwatch) => {
10+
// click on each swatch button
11+
curSwatch.addEventListener('click', (evt) => {
12+
// set/replace root style color with currently clicked color
13+
root.style.setProperty('--main-theme-color', event.target.style.backgroundColor);
14+
15+
}) // addEventListener
16+
}) // forEach
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
:root {
2+
--main-font-family: Verdana;
3+
--main-theme-color: #8a2be2;
4+
}
5+
6+
body {
7+
font-family: var(--main-font-family);
8+
}
9+
10+
.swatches-container div {
11+
display: inline-block;
12+
width: 20px;
13+
height: 20px;
14+
margin: 5px;
15+
cursor: pointer;
16+
}
17+
18+
.top-heading-text {
19+
color: var(--main-theme-color);
20+
}
21+
22+
.content-container {
23+
background-color: var(--main-theme-color);
24+
padding: 20px;
25+
color: #ffffff;
26+
line-height: 2;
27+
}
28+
29+
.info-text {
30+
padding-bottom: 20px;
31+
margin-bottom: 20px;
32+
border-bottom: 2px solid #ffffff;
33+
}
34+
35+
.footer-text {
36+
font-size: 0.8em;
37+
text-align: center;
38+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /