claritas-web-framework 8.5.8 → 8.5.9

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 (86) hide show
  1. package/.prettierrc +10 -10
  2. package/README.md +1 -1
  3. package/dist/index.css +1 -1
  4. package/index.html +20 -20
  5. package/index.js +2 -2
  6. package/package.json +33 -33
  7. package/sass/_functions.scss +55 -55
  8. package/sass/_helpers.scss +8 -8
  9. package/sass/_mixins.scss +12 -12
  10. package/sass/_modules.scss +30 -30
  11. package/sass/_reboot.scss +264 -264
  12. package/sass/_root.scss +56 -56
  13. package/sass/_utilities.scss +17 -17
  14. package/sass/_variables.scss +445 -445
  15. package/sass/helpers/_container.scss +11 -11
  16. package/sass/helpers/_embed.scss +36 -36
  17. package/sass/helpers/_grid.scss +53 -53
  18. package/sass/helpers/_image.scss +5 -5
  19. package/sass/helpers/_link.scss +15 -15
  20. package/sass/helpers/_rfs.scss +303 -303
  21. package/sass/helpers/_screenReader.scss +13 -13
  22. package/sass/helpers/_wrap.scss +5 -5
  23. package/sass/index.scss +12 -12
  24. package/sass/mixins/_breakpoints.scss +133 -133
  25. package/sass/mixins/_button.scss +116 -116
  26. package/sass/mixins/_caret.scss +41 -41
  27. package/sass/mixins/_clearfix.scss +7 -7
  28. package/sass/mixins/_colors.scss +23 -23
  29. package/sass/mixins/_container.scss +21 -21
  30. package/sass/mixins/_gradient.scss +55 -55
  31. package/sass/mixins/_grid.scss +156 -156
  32. package/sass/mixins/_group.scss +70 -70
  33. package/sass/mixins/_list.scss +18 -18
  34. package/sass/mixins/_screenReader.scss +22 -22
  35. package/sass/mixins/_wrap.scss +7 -7
  36. package/sass/modules/_alert.scss +60 -60
  37. package/sass/modules/_breadcrumbs.scss +43 -43
  38. package/sass/modules/_button.scss +170 -170
  39. package/sass/modules/_card.scss +107 -107
  40. package/sass/modules/_close.scss +59 -59
  41. package/sass/modules/_details.scss +48 -48
  42. package/sass/modules/_dialog.scss +47 -47
  43. package/sass/modules/_dropdown.scss +44 -43
  44. package/sass/modules/_form.scss +261 -261
  45. package/sass/modules/_list.scss +78 -78
  46. package/sass/modules/_loader.scss +183 -183
  47. package/sass/modules/_modal.scss +45 -45
  48. package/sass/modules/_nav.scss +136 -135
  49. package/sass/modules/_pill.scss +61 -61
  50. package/sass/modules/_table.scss +96 -96
  51. package/sass/modules/_tabs.scss +88 -93
  52. package/sass/modules/_tag.scss +72 -72
  53. package/sass/modules/_tile.scss +101 -101
  54. package/sass/modules/_tooltip.scss +108 -108
  55. package/sass/modules/form/_checkbox.scss +78 -78
  56. package/sass/modules/form/_file.scss +149 -149
  57. package/sass/modules/form/_formFieldGroup.scss +60 -60
  58. package/sass/modules/form/_output.scss +6 -6
  59. package/sass/modules/form/_progress.scss +55 -55
  60. package/sass/modules/form/_radio.scss +57 -57
  61. package/sass/modules/form/_range.scss +144 -144
  62. package/sass/modules/form/_select.scss +22 -22
  63. package/sass/modules/form/_text.scss +28 -28
  64. package/sass/modules/form/_textarea.scss +3 -3
  65. package/sass/modules/form/_toggle.scss +68 -68
  66. package/sass/utilities/_align.scss +25 -25
  67. package/sass/utilities/_border.scss +59 -59
  68. package/sass/utilities/_colors.scss +76 -76
  69. package/sass/utilities/_display.scss +25 -25
  70. package/sass/utilities/_flex.scss +65 -65
  71. package/sass/utilities/_float.scss +17 -17
  72. package/sass/utilities/_order.scss +23 -23
  73. package/sass/utilities/_overflow.scss +25 -25
  74. package/sass/utilities/_pointerEvents.scss +17 -17
  75. package/sass/utilities/_position.scss +59 -59
  76. package/sass/utilities/_shadow.scss +7 -7
  77. package/sass/utilities/_size.scss +118 -118
  78. package/sass/utilities/_spacing.scss +107 -107
  79. package/sass/utilities/_translate.scss +15 -15
  80. package/sass/utilities/_typography.scss +62 -62
  81. package/sass/utilities/_visibility.scss +17 -17
  82. package/sass/utilities/_zIndex.scss +15 -15
  83. package/tests.js +5 -5
  84. package/webpack.config.js +27 -27
  85. package/webpack.plugins.js +15 -15
  86. package/webpack.rules.js +8 -8
package/sass/modules/_loader.scss CHANGED
@@ -1,183 +1,183 @@
1
- @use "./../variables" as *;
2
-
3
- .loader {
4
- width: var(--spacer);
5
- height: var(--spacer);
6
- display: inline-block;
7
- position: relative;
8
- vertical-align: middle;
9
-
10
- &.loader--ring {
11
- & span {
12
- box-sizing: border-box;
13
- display: block;
14
- position: absolute;
15
- width: var(--spacer);
16
- height: var(--spacer);
17
- border: 2px solid var(--body-color);
18
- border-radius: var(--border-radius-round);
19
- animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
20
- border-color: var(--body-color) transparent transparent transparent;
21
-
22
- &:nth-child(1) {
23
- animation-delay: -0.45s;
24
- }
25
-
26
- &:nth-child(2) {
27
- animation-delay: -0.3s;
28
- }
29
-
30
- &:nth-child(3) {
31
- animation-delay: -0.15s;
32
- }
33
- }
34
- }
35
-
36
- &.loader--ellipsis {
37
- width: calc(var(--spacer) * 2.5);
38
- height: var(--spacer);
39
-
40
- & span {
41
- position: absolute;
42
- top: calc(var(--spacer) * 0.25);
43
- width: calc(var(--spacer) * 0.5);
44
- height: calc(var(--spacer) * 0.5);
45
- border-radius: var(--border-radius-round);
46
- background: var(--body-color);
47
- animation-timing-function: cubic-bezier(0, 1, 1, 0);
48
-
49
- &:nth-child(1) {
50
- left: calc(var(--spacer) * 0.25);
51
- animation: ellipsis1 0.6s infinite;
52
- }
53
-
54
- &:nth-child(2) {
55
- left: calc(var(--spacer) * 0.25);
56
- animation: ellipsis2 0.6s infinite;
57
- }
58
-
59
- &:nth-child(3) {
60
- left: var(--spacer);
61
- animation: ellipsis2 0.6s infinite;
62
- }
63
-
64
- &:nth-child(4) {
65
- left: calc(var(--spacer) * 1.75);
66
- animation: ellipsis3 0.6s infinite;
67
- }
68
- }
69
- }
70
-
71
- &.loader--large {
72
- width: calc(var(--spacer) * 2);
73
- height: calc(var(--spacer) * 2);
74
-
75
- &.loader--ring {
76
- & span {
77
- width: calc(var(--spacer) * 2);
78
- height: calc(var(--spacer) * 2);
79
- border-width: 4px;
80
- }
81
- }
82
-
83
- &.loader--ellipsis {
84
- width: calc(var(--spacer) * 2.5);
85
- height: var(--spacer);
86
-
87
- & span {
88
- &:nth-child(1) {
89
- left: calc(var(--spacer) * 0.25);
90
- }
91
-
92
- &:nth-child(2) {
93
- left: calc(var(--spacer) * 0.25);
94
- }
95
-
96
- &:nth-child(3) {
97
- left: var(--spacer);
98
- }
99
-
100
- &:nth-child(4) {
101
- left: calc(var(--spacer) * 1.75);
102
- }
103
- }
104
- }
105
- }
106
-
107
- &.loader--small {
108
- &.loader--ellipsis {
109
- & span {
110
- width: calc(var(--spacer) * 0.25);
111
- height: calc(var(--spacer) * 0.25);
112
-
113
- &:nth-child(1) {
114
- left: calc(var(--spacer) * 0.125);
115
- }
116
-
117
- &:nth-child(2) {
118
- left: calc(var(--spacer) * 0.125);
119
- animation: ellipsis2-small 0.6s infinite;
120
- }
121
-
122
- &:nth-child(3) {
123
- left: calc(var(--spacer) * 0.5);
124
- animation: ellipsis2-small 0.6s infinite;
125
- }
126
-
127
- &:nth-child(4) {
128
- left: calc(var(--spacer) * 0.875);
129
- }
130
- }
131
- }
132
- }
133
- }
134
-
135
- @keyframes ring {
136
- 0% {
137
- transform: rotate(0deg);
138
- }
139
-
140
- 100% {
141
- transform: rotate(360deg);
142
- }
143
- }
144
-
145
- @keyframes ellipsis1 {
146
- 0% {
147
- transform: scale(0);
148
- }
149
-
150
- 100% {
151
- transform: scale(1);
152
- }
153
- }
154
-
155
- @keyframes ellipsis2 {
156
- 0% {
157
- transform: translate(0, 0);
158
- }
159
-
160
- 100% {
161
- transform: translate(calc(var(--spacer) * 0.75), 0);
162
- }
163
- }
164
-
165
- @keyframes ellipsis3 {
166
- 0% {
167
- transform: scale(1);
168
- }
169
-
170
- 100% {
171
- transform: scale(0);
172
- }
173
- }
174
-
175
- @keyframes ellipsis2-small {
176
- 0% {
177
- transform: translate(0, 0);
178
- }
179
-
180
- 100% {
181
- transform: translate(calc(var(--spacer) * 0.375), 0);
182
- }
183
- }
1
+ @use "./../variables" as *;
2
+
3
+ .loader {
4
+ width: var(--spacer);
5
+ height: var(--spacer);
6
+ display: inline-block;
7
+ position: relative;
8
+ vertical-align: middle;
9
+
10
+ &.loader--ring {
11
+ & span {
12
+ box-sizing: border-box;
13
+ display: block;
14
+ position: absolute;
15
+ width: var(--spacer);
16
+ height: var(--spacer);
17
+ border: 2px solid var(--body-color);
18
+ border-radius: var(--border-radius-round);
19
+ animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
20
+ border-color: var(--body-color) transparent transparent transparent;
21
+
22
+ &:nth-child(1) {
23
+ animation-delay: -0.45s;
24
+ }
25
+
26
+ &:nth-child(2) {
27
+ animation-delay: -0.3s;
28
+ }
29
+
30
+ &:nth-child(3) {
31
+ animation-delay: -0.15s;
32
+ }
33
+ }
34
+ }
35
+
36
+ &.loader--ellipsis {
37
+ width: calc(var(--spacer) * 2.5);
38
+ height: var(--spacer);
39
+
40
+ & span {
41
+ position: absolute;
42
+ top: calc(var(--spacer) * 0.25);
43
+ width: calc(var(--spacer) * 0.5);
44
+ height: calc(var(--spacer) * 0.5);
45
+ border-radius: var(--border-radius-round);
46
+ background: var(--body-color);
47
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
48
+
49
+ &:nth-child(1) {
50
+ left: calc(var(--spacer) * 0.25);
51
+ animation: ellipsis1 0.6s infinite;
52
+ }
53
+
54
+ &:nth-child(2) {
55
+ left: calc(var(--spacer) * 0.25);
56
+ animation: ellipsis2 0.6s infinite;
57
+ }
58
+
59
+ &:nth-child(3) {
60
+ left: var(--spacer);
61
+ animation: ellipsis2 0.6s infinite;
62
+ }
63
+
64
+ &:nth-child(4) {
65
+ left: calc(var(--spacer) * 1.75);
66
+ animation: ellipsis3 0.6s infinite;
67
+ }
68
+ }
69
+ }
70
+
71
+ &.loader--large {
72
+ width: calc(var(--spacer) * 2);
73
+ height: calc(var(--spacer) * 2);
74
+
75
+ &.loader--ring {
76
+ & span {
77
+ width: calc(var(--spacer) * 2);
78
+ height: calc(var(--spacer) * 2);
79
+ border-width: 4px;
80
+ }
81
+ }
82
+
83
+ &.loader--ellipsis {
84
+ width: calc(var(--spacer) * 2.5);
85
+ height: var(--spacer);
86
+
87
+ & span {
88
+ &:nth-child(1) {
89
+ left: calc(var(--spacer) * 0.25);
90
+ }
91
+
92
+ &:nth-child(2) {
93
+ left: calc(var(--spacer) * 0.25);
94
+ }
95
+
96
+ &:nth-child(3) {
97
+ left: var(--spacer);
98
+ }
99
+
100
+ &:nth-child(4) {
101
+ left: calc(var(--spacer) * 1.75);
102
+ }
103
+ }
104
+ }
105
+ }
106
+
107
+ &.loader--small {
108
+ &.loader--ellipsis {
109
+ & span {
110
+ width: calc(var(--spacer) * 0.25);
111
+ height: calc(var(--spacer) * 0.25);
112
+
113
+ &:nth-child(1) {
114
+ left: calc(var(--spacer) * 0.125);
115
+ }
116
+
117
+ &:nth-child(2) {
118
+ left: calc(var(--spacer) * 0.125);
119
+ animation: ellipsis2-small 0.6s infinite;
120
+ }
121
+
122
+ &:nth-child(3) {
123
+ left: calc(var(--spacer) * 0.5);
124
+ animation: ellipsis2-small 0.6s infinite;
125
+ }
126
+
127
+ &:nth-child(4) {
128
+ left: calc(var(--spacer) * 0.875);
129
+ }
130
+ }
131
+ }
132
+ }
133
+ }
134
+
135
+ @keyframes ring {
136
+ 0% {
137
+ transform: rotate(0deg);
138
+ }
139
+
140
+ 100% {
141
+ transform: rotate(360deg);
142
+ }
143
+ }
144
+
145
+ @keyframes ellipsis1 {
146
+ 0% {
147
+ transform: scale(0);
148
+ }
149
+
150
+ 100% {
151
+ transform: scale(1);
152
+ }
153
+ }
154
+
155
+ @keyframes ellipsis2 {
156
+ 0% {
157
+ transform: translate(0, 0);
158
+ }
159
+
160
+ 100% {
161
+ transform: translate(calc(var(--spacer) * 0.75), 0);
162
+ }
163
+ }
164
+
165
+ @keyframes ellipsis3 {
166
+ 0% {
167
+ transform: scale(1);
168
+ }
169
+
170
+ 100% {
171
+ transform: scale(0);
172
+ }
173
+ }
174
+
175
+ @keyframes ellipsis2-small {
176
+ 0% {
177
+ transform: translate(0, 0);
178
+ }
179
+
180
+ 100% {
181
+ transform: translate(calc(var(--spacer) * 0.375), 0);
182
+ }
183
+ }
package/sass/modules/_modal.scss CHANGED
@@ -1,45 +1,45 @@
1
- @use "sass:color";
2
- @use "./../variables" as *;
3
-
4
- .modal {
5
- padding: 0;
6
- margin: 0;
7
- background-color: transparent;
8
- border: 0 none;
9
- width: 100vw;
10
- height: 100vh;
11
- max-width: 100vw;
12
- min-height: 100vh;
13
-
14
- &::backdrop {
15
- background: $modal-open-background;
16
- backdrop-filter: blur($modal-background-blur);
17
- }
18
-
19
- & .modal__body {
20
- overflow-y: auto;
21
- padding: $grid-gutter;
22
- display: flex;
23
- flex-direction: column;
24
- max-width: 100%;
25
- position: fixed;
26
- inset: 0;
27
- animation: open-modal 0.25s ease normal;
28
- }
29
- }
30
-
31
- @keyframes open-modal {
32
- 0% {
33
- opacity: 0;
34
- transform: translateY(-50vh);
35
- }
36
-
37
- 20% {
38
- opacity: 0;
39
- }
40
-
41
- 100% {
42
- opacity: 1;
43
- transform: translateY(0%);
44
- }
45
- }
1
+ @use "sass:color";
2
+ @use "./../variables" as *;
3
+
4
+ .modal {
5
+ padding: 0;
6
+ margin: 0;
7
+ background-color: transparent;
8
+ border: 0 none;
9
+ width: 100vw;
10
+ height: 100vh;
11
+ max-width: 100vw;
12
+ min-height: 100vh;
13
+
14
+ &::backdrop {
15
+ background: $modal-open-background;
16
+ backdrop-filter: blur($modal-background-blur);
17
+ }
18
+
19
+ & .modal__body {
20
+ overflow-y: auto;
21
+ padding: $grid-gutter;
22
+ display: flex;
23
+ flex-direction: column;
24
+ max-width: 100%;
25
+ position: fixed;
26
+ inset: 0;
27
+ animation: open-modal 0.25s ease normal;
28
+ }
29
+ }
30
+
31
+ @keyframes open-modal {
32
+ 0% {
33
+ opacity: 0;
34
+ transform: translateY(-50vh);
35
+ }
36
+
37
+ 20% {
38
+ opacity: 0;
39
+ }
40
+
41
+ 100% {
42
+ opacity: 1;
43
+ transform: translateY(0%);
44
+ }
45
+ }