claritas-web-framework 6.3.22 → 6.4.0

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 (27) hide show
  1. package/README.md +1 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.html +1 -1
  4. package/index.html +25 -48
  5. package/package.json +15 -15
  6. package/sass/_functions.scss +1 -1
  7. package/sass/_reboot.scss +2 -0
  8. package/sass/_root.scss +7 -2
  9. package/sass/_variables.scss +7 -9
  10. package/sass/helpers/_grid.scss +41 -23
  11. package/sass/helpers/_link.scss +1 -4
  12. package/sass/mixins/_colors.scss +0 -1
  13. package/sass/mixins/_colors.temp.scss +1 -0
  14. package/sass/mixins/_container.scss +1 -1
  15. package/sass/mixins/_grid.scss +124 -46
  16. package/sass/modules/_button.old.scss +1 -0
  17. package/sass/modules/_button.scss +0 -1
  18. package/sass/modules/_list.scss +4 -4
  19. package/sass/modules/_modal.scss +1 -1
  20. package/sass/modules/_pill.scss +0 -2
  21. package/sass/modules/_tag.scss +0 -2
  22. package/sass/modules/_tooltip.scss +8 -32
  23. package/sass/modules/form/_checkbox.scss +1 -4
  24. package/sass/modules/form/_file.scss +1 -4
  25. package/sass/modules/form/_radio.scss +1 -4
  26. package/sass/modules/form/_toggle.scss +1 -4
  27. package/sass/utilities/_border.scss +4 -12
package/sass/modules/_tooltip.scss CHANGED
@@ -27,10 +27,7 @@
27
27
  border-right: 6px solid transparent;
28
28
  border-bottom: 0 none;
29
29
  border-left: 6px solid transparent;
30
- top: -6px;
31
- right: auto;
32
- bottom: auto;
33
- left: 50%;
30
+ inset: -6px auto auto 50%;
34
31
  margin: 0 0 0 -6px;
35
32
  }
36
33
 
@@ -41,10 +38,7 @@
41
38
  min-width: calc($spacer * 6);
42
39
  padding: 4px 8px;
43
40
  border-radius: 3px;
44
- top: auto;
45
- right: auto;
46
- bottom: 100%;
47
- left: 50%;
41
+ inset: auto auto 100% 50%;
48
42
  transform: translateY(-6px) translateX(-50%);
49
43
  }
50
44
 
@@ -60,18 +54,12 @@
60
54
  border-right: 0 none;
61
55
  border-bottom: 6px solid transparent;
62
56
  border-left: 6px solid rgba($black, 75%);
63
- top: 50%;
64
- right: auto;
65
- bottom: auto;
66
- left: -6px;
57
+ inset: 50% auto auto -6px;
67
58
  margin: -6px 0 0;
68
59
  }
69
60
 
70
61
  &::after {
71
- top: 50%;
72
- right: 100%;
73
- bottom: auto;
74
- left: auto;
62
+ inset: 50% 100% auto auto;
75
63
  transform: translateY(-50%) translateX(-6px);
76
64
  }
77
65
  }
@@ -82,18 +70,12 @@
82
70
  border-right: 6px solid rgba($black, 75%);
83
71
  border-bottom: 6px solid transparent;
84
72
  border-left: 0 none;
85
- top: 50%;
86
- right: -6px;
87
- bottom: auto;
88
- left: auto;
73
+ inset: 50% -6px auto auto;
89
74
  margin: -6px 0 0;
90
75
  }
91
76
 
92
77
  &::after {
93
- top: 50%;
94
- right: auto;
95
- bottom: auto;
96
- left: 100%;
78
+ inset: 50% auto auto 100%;
97
79
  transform: translateY(-50%) translateX(6px);
98
80
  }
99
81
  }
@@ -104,18 +86,12 @@
104
86
  border-right: 6px solid transparent;
105
87
  border-bottom: 6px solid rgba($black, 75%);
106
88
  border-left: 6px solid transparent;
107
- top: auto;
108
- right: auto;
109
- bottom: -6px;
110
- left: 50%;
89
+ inset: auto auto -6px 50%;
111
90
  margin: 0 0 0 -6px;
112
91
  }
113
92
 
114
93
  &::after {
115
- top: 100%;
116
- right: auto;
117
- bottom: auto;
118
- left: 50%;
94
+ inset: 100% auto auto 50%;
119
95
  transform: translateY(6px) translateX(-50%);
120
96
  }
121
97
  }
package/sass/modules/form/_checkbox.scss CHANGED
@@ -29,10 +29,7 @@
29
29
  content: "";
30
30
  position: absolute;
31
31
  margin: auto;
32
- left: 0;
33
- right: 0;
34
- bottom: 0;
35
- top: 0;
32
+ inset: 0;
36
33
  overflow: hidden;
37
34
  }
38
35
 
package/sass/modules/form/_file.scss CHANGED
@@ -11,10 +11,7 @@
11
11
  position: absolute;
12
12
  width: 100%;
13
13
  height: 100%;
14
- top: 0;
15
- left: 0;
16
- right: 0;
17
- bottom: 0;
14
+ inset: 0;
18
15
  opacity: 0;
19
16
 
20
17
  & ~ .file--name {
package/sass/modules/form/_radio.scss CHANGED
@@ -31,10 +31,7 @@
31
31
  content: "";
32
32
  position: absolute;
33
33
  margin: auto;
34
- left: 0;
35
- right: 0;
36
- bottom: 0;
37
- top: 0;
34
+ inset: 0;
38
35
  overflow: hidden;
39
36
  }
40
37
 
package/sass/modules/form/_toggle.scss CHANGED
@@ -29,10 +29,7 @@
29
29
  content: "";
30
30
  position: absolute;
31
31
  margin: auto;
32
- left: 0;
33
- right: 50%;
34
- bottom: 0;
35
- top: 0;
32
+ inset: 0 50% 0 0;
36
33
  overflow: hidden;
37
34
  border: 6px solid $input-background-color;
38
35
  border-radius: $border-radius-round;
package/sass/utilities/_border.scss CHANGED
@@ -13,9 +13,7 @@
13
13
 
14
14
  .border--top,
15
15
  .border-top {
16
- border-top-width: 1px !important;
17
- border-top-style: solid !important;
18
- border-top-color: hsl(
16
+ border-top: 1px solid hsl(
19
17
  var(--border-color-h) var(--border-color-s) var(--border-color-l) /
20
18
  calc(var(--border-color-a) * #{$border-opacity-value})
21
19
  ) !important;
@@ -23,9 +21,7 @@
23
21
 
24
22
  .border--right,
25
23
  .border-right {
26
- border-right-width: 1px !important;
27
- border-right-style: solid !important;
28
- border-right-color: hsl(
24
+ border-right: 1px solid hsl(
29
25
  var(--border-color-h) var(--border-color-s) var(--border-color-l) /
30
26
  calc(var(--border-color-a) * #{$border-opacity-value})
31
27
  ) !important;
@@ -33,9 +29,7 @@
33
29
 
34
30
  .border--bottom,
35
31
  .border-bottom {
36
- border-bottom-width: 1px !important;
37
- border-bottom-style: solid !important;
38
- border-bottom-color: hsl(
32
+ border-bottom: 1px solid hsl(
39
33
  var(--border-color-h) var(--border-color-s) var(--border-color-l) /
40
34
  calc(var(--border-color-a) * #{$border-opacity-value})
41
35
  ) !important;
@@ -43,9 +37,7 @@
43
37
 
44
38
  .border--left,
45
39
  .border-left {
46
- border-left-width: 1px !important;
47
- border-left-style: solid !important;
48
- border-left-color: hsl(
40
+ border-left: 1px solid hsl(
49
41
  var(--border-color-h) var(--border-color-s) var(--border-color-l) /
50
42
  calc(var(--border-color-a) * #{$border-opacity-value})
51
43
  ) !important;