@oardi/css-utils 0.62.2 → 0.63.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 (9) hide show
  1. package/package.json +1 -1
  2. package/scss/components/button.scss +11 -5
  3. package/scss/components/form.scss +30 -11
  4. package/scss/components/icon-button.scss +14 -4
  5. package/scss/components/pagination.scss +2 -1
  6. package/scss/components/tabs.scss +2 -1
  7. package/scss/typography.scss +1 -1
  8. package/scss/utilities.scss +10 -0
  9. package/scss/variables.scss +1 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.62.2",
3
+ "version": "0.63.1",
4
4
  "author": "Ardian Shala",
5
5
  "homepage": "https://css-utils.oardi.com",
6
6
  "description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
package/scss/components/button.scss CHANGED
@@ -54,7 +54,8 @@
54
54
  text-decoration: none;
55
55
  }
56
56
 
57
- &:focus-visible {
57
+ &:focus-visible,
58
+ &.is-focus-visible {
58
59
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
59
60
  var(--button-focus-outline-color);
60
61
  outline-offset: var(--button-focus-outline-offset);
@@ -99,9 +100,11 @@
99
100
  border-color: var(--button-color-active);
100
101
  }
101
102
 
102
- &:focus-visible {
103
+ &:focus-visible,
104
+ &.is-focus-visible {
103
105
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
104
106
  rgba(var(--button-color-rgb), 0.5);
107
+ outline-offset: var(--button-focus-outline-offset);
105
108
  }
106
109
  }
107
110
 
@@ -123,9 +126,11 @@
123
126
  border-color: var(--button-color-active);
124
127
  }
125
128
 
126
- &:focus-visible {
129
+ &:focus-visible,
130
+ &.is-focus-visible {
127
131
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
128
132
  rgba(var(--button-color-rgb), 0.5);
133
+ outline-offset: var(--button-focus-outline-offset);
129
134
  }
130
135
  }
131
136
 
@@ -139,13 +144,14 @@
139
144
  &:hover,
140
145
  &.is-active,
141
146
  &:active {
142
- // color: var(--button-on-color); // check if needed
143
147
  background-color: var(--button-highlight);
144
148
  }
145
149
 
146
- &:focus-visible {
150
+ &:focus-visible,
151
+ &.is-focus-visible {
147
152
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
148
153
  rgba(var(--button-color-rgb), 0.5);
154
+ outline-offset: var(--button-focus-outline-offset);
149
155
  }
150
156
  }
151
157
 
package/scss/components/form.scss CHANGED
@@ -46,7 +46,8 @@
46
46
  border-color var(--form-control-transition-duration) var(--form-control-transition-easing),
47
47
  outline-offset var(--form-control-transition-duration) var(--form-control-transition-easing);
48
48
 
49
- &:focus {
49
+ &:focus,
50
+ &.is-focus-visible {
50
51
  background-color: var(--form-control-bg-color);
51
52
  border-color: var(--form-control-focus-border-color);
52
53
  outline: var(--form-control-focus-outline-width) var(--form-control-focus-outline-style)
@@ -55,11 +56,12 @@
55
56
  }
56
57
 
57
58
  &.is-invalid {
58
- color: var(--error);
59
+ // color: var(--error);
59
60
  border-color: var(--error);
60
61
  padding-inline-end: calc(1.5em + var(--form-control-padding-x));
61
62
 
62
- &:focus {
63
+ &:focus,
64
+ &.is-focus-visible {
63
65
  outline: var(--focus-outline-error);
64
66
  outline-offset: var(--form-control-focus-outline-offset);
65
67
  }
@@ -69,7 +71,6 @@
69
71
  &[disabled] {
70
72
  opacity: 1;
71
73
  cursor: not-allowed;
72
- pointer-events: none;
73
74
  box-shadow: none;
74
75
  outline: 0;
75
76
  color: var(--form-control-disabled-text-color);
@@ -145,7 +146,8 @@
145
146
  border-color var(--form-select-transition-duration) var(--form-select-transition-easing),
146
147
  outline-offset var(--form-select-transition-duration) var(--form-select-transition-easing);
147
148
 
148
- &:focus {
149
+ &:focus,
150
+ &.is-focus-visible {
149
151
  border-color: var(--form-select-focus-border-color);
150
152
  outline: var(--form-select-focus-outline-width) var(--form-select-focus-outline-style)
151
153
  var(--form-select-focus-outline-color);
@@ -156,7 +158,8 @@
156
158
  color: var(--error);
157
159
  border-color: var(--error);
158
160
 
159
- &:focus {
161
+ &:focus,
162
+ &.is-focus-visible {
160
163
  outline: var(--focus-outline-error);
161
164
  outline-offset: var(--form-select-focus-outline-offset);
162
165
  }
@@ -166,7 +169,6 @@
166
169
  &[disabled] {
167
170
  opacity: 1;
168
171
  cursor: not-allowed;
169
- pointer-events: none;
170
172
  box-shadow: none;
171
173
  outline: 0;
172
174
  color: var(--form-select-disabled-text-color);
@@ -202,6 +204,7 @@
202
204
  gap: var(--form-check-gap);
203
205
 
204
206
  .form-check-input {
207
+ margin: 0;
205
208
  position: relative;
206
209
  flex-shrink: 0;
207
210
  width: var(--form-check-input-size);
@@ -251,7 +254,8 @@
251
254
  transform: translate(-50%, -50%);
252
255
  }
253
256
 
254
- &:focus-visible {
257
+ &:focus-visible,
258
+ &.is-focus-visible {
255
259
  border-color: var(--primary-hover);
256
260
  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
257
261
  outline-offset: var(--focus-offset);
@@ -260,7 +264,8 @@
260
264
  &.is-invalid {
261
265
  border-color: var(--error);
262
266
 
263
- &:focus-visible {
267
+ &:focus-visible,
268
+ &.is-focus-visible {
264
269
  outline: var(--focus-outline-error);
265
270
  outline-offset: var(--focus-offset);
266
271
  }
@@ -271,6 +276,12 @@
271
276
  cursor: not-allowed;
272
277
  background-color: var(--form-check-disabled-bg-color);
273
278
  border-color: var(--form-check-disabled-border-color);
279
+
280
+ & + .form-label,
281
+ & + .form-label {
282
+ color: var(--disabled-text-color);
283
+ cursor: not-allowed;
284
+ }
274
285
  }
275
286
  }
276
287
 
@@ -395,7 +406,8 @@
395
406
  }
396
407
  }
397
408
 
398
- &:focus-visible {
409
+ &:focus-visible,
410
+ &.is-focus-visible {
399
411
  outline: var(--form-switch-focus-outline-width) var(--form-switch-focus-outline-style)
400
412
  var(--form-switch-focus-outline-color);
401
413
  outline-offset: var(--form-switch-focus-outline-offset);
@@ -404,7 +416,8 @@
404
416
  &.is-invalid {
405
417
  border-color: var(--error);
406
418
 
407
- &:focus-visible {
419
+ &:focus-visible,
420
+ &.is-focus-visible {
408
421
  outline: var(--focus-outline-error);
409
422
  outline-offset: var(--form-switch-focus-outline-offset);
410
423
  }
@@ -419,6 +432,12 @@
419
432
  &::after {
420
433
  background-color: var(--form-switch-disabled-thumb-bg-color);
421
434
  }
435
+
436
+ & + .form-label,
437
+ & + .form-label {
438
+ color: var(--disabled-text-color);
439
+ cursor: not-allowed;
440
+ }
422
441
  }
423
442
  }
424
443
 
package/scss/components/icon-button.scss CHANGED
@@ -69,7 +69,8 @@
69
69
  text-decoration: none;
70
70
  }
71
71
 
72
- &:focus-visible {
72
+ &:focus-visible,
73
+ &.is-focus-visible {
73
74
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
74
75
  var(--icon-button-focus-outline-color);
75
76
  outline-offset: var(--icon-button-focus-outline-offset);
@@ -98,8 +99,11 @@
98
99
  border-color: transparent;
99
100
  }
100
101
 
101
- &:focus-visible {
102
+ &:focus-visible,
103
+ &.is-focus-visible {
102
104
  outline-color: rgba(var(--icon-button-color-rgb), 0.5);
105
+ outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
106
+ rgba(var(--icon-button-color-rgb), 0.5);
103
107
  background-color: var(--icon-button-highlight);
104
108
  }
105
109
  }
@@ -122,8 +126,11 @@
122
126
  border-color: var(--icon-button-color-active);
123
127
  }
124
128
 
125
- &:focus-visible {
129
+ &:focus-visible,
130
+ &.is-focus-visible {
126
131
  outline-color: rgba(var(--icon-button-color-rgb), 0.5);
132
+ outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
133
+ rgba(var(--icon-button-color-rgb), 0.5);
127
134
  }
128
135
  }
129
136
 
@@ -145,8 +152,11 @@
145
152
  border-color: var(--icon-button-color-active);
146
153
  }
147
154
 
148
- &:focus-visible {
155
+ &:focus-visible,
156
+ &.is-focus-visible {
149
157
  outline-color: rgba(var(--icon-button-color-rgb), 0.5);
158
+ outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
159
+ rgba(var(--icon-button-color-rgb), 0.5);
150
160
  }
151
161
  }
152
162
 
package/scss/components/pagination.scss CHANGED
@@ -59,7 +59,8 @@
59
59
  text-decoration: none;
60
60
  }
61
61
 
62
- &:focus-visible {
62
+ &:focus-visible,
63
+ &.is-focus-visible {
63
64
  outline: var(--pagination-item-focus-outline-width) var(--pagination-item-focus-outline-style)
64
65
  var(--pagination-item-focus-outline-color);
65
66
  outline-offset: var(--pagination-item-focus-outline-offset);
package/scss/components/tabs.scss CHANGED
@@ -63,7 +63,8 @@
63
63
  border-block-end-color: var(--tab-active-border-color);
64
64
  }
65
65
 
66
- &:focus-visible {
66
+ &:focus-visible,
67
+ &.is-focus-visible {
67
68
  z-index: 10;
68
69
  color: var(--tab-active-color);
69
70
  outline: var(--tab-focus-outline-width) var(--tab-focus-outline-style) var(--tab-focus-outline-color);
package/scss/typography.scss CHANGED
@@ -99,7 +99,7 @@
99
99
  text-decoration: underline;
100
100
  }
101
101
 
102
- &:focus {
102
+ &:focus-visible {
103
103
  outline: var(--link-focus-outline-width) var(--link-focus-outline-style) var(--link-focus-outline-color);
104
104
  outline-offset: var(--focus-offset);
105
105
  }
package/scss/utilities.scss CHANGED
@@ -321,4 +321,14 @@
321
321
  z-index: $value;
322
322
  }
323
323
  }
324
+
325
+ .focus-ring {
326
+ outline: var(--focus-ring-width, var(--focus-outline-width)) var(--focus-ring-style, var(--focus-outline-style))
327
+ var(--focus-ring-color, var(--focus-outline-color));
328
+ outline-offset: var(--focus-ring-offset, var(--focus-offset));
329
+ }
330
+
331
+ .focus-ring-0 {
332
+ outline: 0;
333
+ }
324
334
  }
package/scss/variables.scss CHANGED
@@ -72,11 +72,10 @@
72
72
  --focus-outline-color: rgba(var(--primary-rgb), 0.5);
73
73
  --focus-outline-style: solid;
74
74
  --focus-outline-width: 2.5px;
75
+ --focus-offset: 0px;
75
76
 
76
77
  --focus-outline-error: var(--focus-outline-width) var(--focus-outline-style) rgba(var(--error-rgb), 0.5); // create focus outline for every theme color?
77
78
 
78
- --focus-offset: 0px;
79
-
80
79
  --container: 900px;
81
80
 
82
81
  --transition-duration-fast: 0.12s;