claritas-web-framework 6.0.0-alpha-15 → 6.0.0-alpha-16

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 (7) hide show
  1. package/index.html +1 -1
  2. package/package.json +4 -4
  3. package/scss/_reboot.scss +1 -1
  4. package/scss/mixins/_alert.scss +1 -1
  5. package/scss/mixins/_colors.scss +1 -1
  6. package/scss/mixins/_tag.scss +22 -2
  7. package/scss/modules/_tag.scss +4 -4
package/index.html CHANGED
@@ -8,6 +8,6 @@
8
8
  </head>
9
9
 
10
10
  <body>
11
- <span class="tag tag--danger">Click me!</span>
11
+ <a href="/" class="tag tag--warning tag--link">Click me!</a>
12
12
  </body>
13
13
  </html>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "claritas-web-framework",
3
- "version": "6.0.0-alpha-15",
4
- "updated": "04/08/2022",
3
+ "version": "6.0.0-alpha-16",
4
+ "updated": "09/08/2022",
5
5
  "description": "The CSS framework built for Claritas front end.",
6
6
  "main": "index.js",
7
7
  "scripts": {
@@ -26,7 +26,7 @@
26
26
  "find-unused-sass-variables": "^4.0.4",
27
27
  "html-webpack-plugin": "^5.5.0",
28
28
  "mini-css-extract-plugin": "^2.6.1",
29
- "postcss": "^8.4.14",
29
+ "postcss": "^8.4.16",
30
30
  "postcss-advanced-variables": "^3.0.1",
31
31
  "postcss-import": "^14.1.0",
32
32
  "postcss-inline-svg": "^5.0.0",
@@ -34,7 +34,7 @@
34
34
  "postcss-preset-env": "^7.7.2",
35
35
  "postcss-scss": "^4.0.4",
36
36
  "prettier": "^2.7.1",
37
- "sass": "^1.54.2",
37
+ "sass": "^1.54.3",
38
38
  "sass-loader": "^13.0.2",
39
39
  "webpack": "^5.74.0",
40
40
  "webpack-cli": "^4.10.0",
package/scss/_reboot.scss CHANGED
@@ -252,7 +252,7 @@ sup {
252
252
 
253
253
  // Links
254
254
 
255
- a:not(.button) {
255
+ a[href] {
256
256
  color: $link-color;
257
257
  text-decoration: $link-decoration;
258
258
 
package/scss/mixins/_alert.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  background-color: $value;
3
3
  color: shade-color($value, 75%);
4
4
 
5
- & a:not(.button) {
5
+ & a[href] {
6
6
  color: shade-color($value, 75%);
7
7
 
8
8
  &:hover {
package/scss/mixins/_colors.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @mixin make-color($value) {
2
2
  color: $value !important;
3
3
 
4
- & a:not(.button) {
4
+ & a[href] {
5
5
  color: $value !important;
6
6
 
7
7
  &:hover,
package/scss/mixins/_tag.scss CHANGED
@@ -1,8 +1,28 @@
1
- @mixin tag-variant($background, $color) {
1
+ @mixin tag-variant(
2
+ $background,
3
+ $color,
4
+ $hover-background:
5
+ if(
6
+ $color == $color-contrast-light,
7
+ shade-color($background, $button-hover-bg-shade-amount),
8
+ tint-color($background, $button-hover-bg-tint-amount)
9
+ ),
10
+ $hover-color: color-contrast($hover-background)
11
+ ) {
2
12
  color: $color;
3
13
  @include gradient-bg($background);
4
14
 
5
15
  &.tag--link {
6
- color: shade-color($color, $link-shade-percentage);
16
+ color: $color;
17
+ @include gradient-bg($background);
18
+
19
+ &:hover {
20
+ color: $hover-color;
21
+ background-color: $hover-background;
22
+ }
7
23
  }
24
+
25
+ // &.tag--link {
26
+ // color: shade-color($color, $link-shade-percentage);
27
+ // }
8
28
  }
package/scss/modules/_tag.scss CHANGED
@@ -23,12 +23,12 @@
23
23
  border-radius: 0;
24
24
  }
25
25
 
26
- &.tag--button {
26
+ &.tag--link {
27
27
  cursor: pointer;
28
+ color: $tag-color;
29
+ background-color: $tag-background;
28
30
 
29
- &:not(:disabled):not(.disabled):focus,
30
- &:not(:disabled):not(.disabled):hover {
31
- background-color: shade-color($light, 10%);
31
+ &:hover {
32
32
  color: shade-color($body-color, $link-shade-percentage);
33
33
  text-decoration: none;
34
34
  }