claritas-web-framework 8.0.0 → 8.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.html +1 -1
  3. package/index.html +7 -1
  4. package/package.json +2 -2
  5. package/sass/modules/_nav.scss +9 -5
package/dist/index.html CHANGED
@@ -1 +1 @@
1
- <!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body><div class="container padding-y--5"><div class="tabs--wrapper card border--red"><nav class="nav nav--tabs"><button type="button" class="nav--item">Click me</button> <button type="button" class="nav--item active">Click me</button> <button type="button" class="nav--item">Click me</button> <button type="button" class="nav--item">Click me</button></nav><div class="tabs--content active background--blue"><p class="color--red">hello, <a href="/">you</a></p></div></div></div></body></html>
1
+ <!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body style="background: red"><div class="container padding-y--5"><nav class="nav"><button type="button" class="nav--item">Click me</button> <button type="button" class="nav--item active">Click me</button> <button type="button" class="nav--item">Click me</button> <button type="button" class="nav--item">Click me</button></nav><div class="tabs--wrapper card border--red"><nav class="nav nav--tabs"><button type="button" class="nav--item">Click me</button> <button type="button" class="nav--item active">Click me</button> <button type="button" class="nav--item">Click me</button> <button type="button" class="nav--item">Click me</button></nav><div class="tabs--content active background--blue"><p class="color--red">hello, <a href="/">you</a></p></div></div></div></body></html>
package/index.html CHANGED
@@ -7,8 +7,14 @@
7
7
  <title><%= htmlWebpackPlugin.options.title %></title>
8
8
  </head>
9
9
 
10
- <body>
10
+ <body style="background: red">
11
11
  <div class="container padding-y--5">
12
+ <nav class="nav">
13
+ <button type="button" class="nav--item">Click me</button>
14
+ <button type="button" class="nav--item active">Click me</button>
15
+ <button type="button" class="nav--item">Click me</button>
16
+ <button type="button" class="nav--item">Click me</button>
17
+ </nav>
12
18
  <div class="tabs--wrapper card border--red">
13
19
  <nav class="nav nav--tabs">
14
20
  <button type="button" class="nav--item">Click me</button>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "claritas-web-framework",
3
- "version": "8.0.0",
4
- "updated": "27/07/2023",
3
+ "version": "8.0.1",
4
+ "updated": "28/07/2023",
5
5
  "description": "The CSS framework built for Claritas front end.",
6
6
  "main": "index.js",
7
7
  "scripts": {
package/sass/modules/_nav.scss CHANGED
@@ -25,11 +25,11 @@
25
25
  --nav-item-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 65%);
26
26
  --nav-label-hover-color: hsl(var(--medium-h) var(--medium-s) var(--medium-l) / 100%);
27
27
 
28
- --nav-item-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
29
- --nav-item-hover-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
30
- --nav-item-focus-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
31
- --nav-item-active-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
32
- --nav-item-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 65%);
28
+ --nav-item-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 0%);
29
+ --nav-item-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 30%);
30
+ --nav-item-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 30%);
31
+ --nav-item-active-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 20%);
32
+ --nav-item-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 0%);
33
33
 
34
34
  display: flex;
35
35
  flex-wrap: wrap;
@@ -106,6 +106,10 @@
106
106
  &.active {
107
107
  color: var(--nav-item-active-color);
108
108
  background: var(--nav-item-active-background);
109
+
110
+ &:hover {
111
+ background: var(--nav-item-hover-background);
112
+ }
109
113
  }
110
114
 
111
115
  &:disabled,