@madj2k/fe-frontend-kit 2.0.12 → 2.0.14

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@madj2k/fe-frontend-kit",
3
- "version": "2.0.12",
3
+ "version": "2.0.14",
4
4
  "description": "Shared frontend utilities, menus and mixins for projects",
5
5
  "main": "index.js",
6
6
  "style": "index.scss",
@@ -30,21 +30,38 @@
30
30
  ///
31
31
  @mixin accessibility-outline($color: var(--bs-primary), $width: 3px, $selector: null) {
32
32
 
33
+ // remove outline
33
34
  &:focus,
34
35
  &:focus-within {
35
36
  outline: 0;
36
37
  }
37
38
 
38
- &:has(input:focus-visible),
39
- &:focus-visible {
40
- @if $selector == null {
39
+ // default behavior
40
+ @if $selector == null {
41
+
42
+ &:has(input:focus-visible),
43
+ &:focus-visible {
41
44
  outline: rem-calc($width) solid $color;
42
- } @else if str-slice($selector, 1, 2) == '::' {
43
- #{&}#{$selector} {
45
+ }
46
+ }
47
+ @else {
48
+
49
+ // if we have a pseudo-element selector
50
+ // we need to add a space before the pseudo-element
51
+ // to prevent the pseudo-element from being removed
52
+ // when the selector is parsed
53
+ @if str-slice($selector, 1, 2) == '::' {
54
+ &:has(input:focus-visible)#{$selector},
55
+ &:focus-visible#{$selector} {
44
56
  outline: rem-calc($width) solid $color;
45
57
  }
46
- } @else {
47
- & #{$selector} {
58
+ }
59
+
60
+ // if we have normal selector
61
+ // we can just add the selector
62
+ @else {
63
+ &:has(input:focus-visible) #{$selector},
64
+ &:focus-visible #{$selector} {
48
65
  outline: rem-calc($width) solid $color;
49
66
  }
50
67
  }
@@ -60,8 +60,6 @@ $color-primary: #ff0000 !default; // Fallback
60
60
  opacity: 0;
61
61
  }
62
62
 
63
- @include accessibility-outline();
64
-
65
63
  &::before {
66
64
  content: "";
67
65
  position: absolute;
@@ -301,9 +301,6 @@
301
301
  margin: 0;
302
302
  padding: 0;
303
303
 
304
- // accessibility
305
- @include accessibility-outline();
306
-
307
304
  &:has(.nav-toggle-icon) {
308
305
  display: flex;
309
306
  align-items: center;