@uxf/ui 11.105.0 → 11.106.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 (38) hide show
  1. package/css/avatar.css +19 -3
  2. package/css/badge.css +15 -6
  3. package/css/button-list.css +3 -1
  4. package/css/button.css +3 -1
  5. package/css/checkbox-button.css +79 -25
  6. package/css/checkbox-input.css +2 -3
  7. package/css/checkbox.css +49 -24
  8. package/css/color-radio-group.css +7 -3
  9. package/css/color-radio.css +29 -6
  10. package/css/date-picker.css +5 -2
  11. package/css/dropzone.css +9 -3
  12. package/css/error-message.css +4 -1
  13. package/css/file-input.css +30 -11
  14. package/css/flash-messages.css +2 -2
  15. package/css/form-component.css +5 -2
  16. package/css/image-gallery.css +65 -15
  17. package/css/input-basic.css +10 -4
  18. package/css/input-with-popover.css +15 -6
  19. package/css/input.css +69 -40
  20. package/css/label.css +7 -2
  21. package/css/list-item.css +14 -5
  22. package/css/loader.css +17 -6
  23. package/css/lozenge.css +2 -2
  24. package/css/menu.css +2 -2
  25. package/css/multi-combobox.css +0 -8
  26. package/css/multi-select.css +0 -10
  27. package/css/pagination.css +27 -16
  28. package/css/paper.css +3 -1
  29. package/css/radio-group.css +39 -13
  30. package/css/radio.css +45 -23
  31. package/css/raster-image.css +14 -5
  32. package/css/text-link.css +5 -1
  33. package/css/typography.css +30 -10
  34. package/date-picker/date-picker-decade.js +4 -2
  35. package/date-picker/date-picker.stories.js +1 -1
  36. package/date-range-picker/date-range-picker-decade.js +4 -2
  37. package/label/label.js +2 -1
  38. package/package.json +5 -5
package/css/avatar.css CHANGED
@@ -1,11 +1,27 @@
1
1
  .uxf-avatar {
2
- @apply relative inline-flex size-10 items-center justify-center rounded-full bg-gray-200 text-gray-700;
2
+ align-items: center;
3
+ background-color: theme("colors.gray.200");
4
+ border-radius: 9999px;
5
+ color: theme("colors.gray.700");
6
+ display: inline-flex;
7
+ height: theme("spacing.10");
8
+ justify-content: center;
9
+ position: relative;
10
+ width: theme("spacing.10");
3
11
 
4
12
  &__image {
5
- @apply rounded-inherit absolute left-0 top-0 block size-full object-cover;
13
+ border-radius: inherit;
14
+ display: block;
15
+ height: 100%;
16
+ left: 0;
17
+ object-fit: cover;
18
+ position: absolute;
19
+ top: 0;
20
+ width: 100%;
6
21
  }
7
22
 
8
23
  :root .dark & {
9
- @apply bg-gray-800 text-gray-200;
24
+ background-color: theme("colors.gray.800");
25
+ color: theme("colors.gray.200");
10
26
  }
11
27
  }
package/css/badge.css CHANGED
@@ -4,34 +4,43 @@
4
4
  }
5
5
 
6
6
  .uxf-badge {
7
- @apply bg-primary inline-flex shrink-0 items-center justify-center font-bold text-white;
8
-
7
+ align-items: center;
8
+ background-color: theme("colors.primary.DEFAULT");
9
+ color: theme("colors.white");
10
+ display: inline-flex;
11
+ flex-shrink: 0;
9
12
  font-size: var(--uxf-badge-font-size);
13
+ font-weight: 700;
10
14
  height: var(--uxf-badge-size);
15
+ justify-content: center;
11
16
  min-width: var(--uxf-badge-size);
12
17
 
13
18
  &--size-small {
14
19
  --uxf-badge-size: theme("space.6");
15
20
  --uxf-badge-font-size: theme("fontSize.sm");
16
21
 
17
- @apply rounded-[12px] px-1.5;
22
+ border-radius: 12px;
23
+ padding-inline: theme("spacing[1.5]");
18
24
  }
19
25
 
20
26
  &--size-medium {
21
27
  --uxf-badge-size: theme("space.8");
22
28
  --uxf-badge-font-size: theme("fontSize.base");
23
29
 
24
- @apply rounded-[16px] px-2;
30
+ border-radius: 16px;
31
+ padding-inline: theme("spacing.2");
25
32
  }
26
33
 
27
34
  &--size-large {
28
35
  --uxf-badge-size: theme("space.10");
29
36
  --uxf-badge-font-size: theme("fontSize.lg");
30
37
 
31
- @apply rounded-[20px] px-2;
38
+ border-radius: 20px;
39
+ padding-inline: theme("spacing.2");
32
40
  }
33
41
 
34
42
  :root .dark & {
35
- @apply bg-white text-gray-900;
43
+ background-color: theme("colors.white");
44
+ color: theme("colors.gray.900");
36
45
  }
37
46
  }
package/css/button-list.css CHANGED
@@ -22,7 +22,9 @@
22
22
  outline: none;
23
23
  }
24
24
 
25
- @apply divide-y divide-gray-100 shadow-lg ring-1 ring-black/5;
25
+ @apply divide-y divide-gray-100 ring-1 ring-black/5;
26
+
27
+ box-shadow: theme("boxShadow.lg");
26
28
 
27
29
  :root .dark & {
28
30
  background-color: theme("colors.gray.900");
package/css/button.css CHANGED
@@ -33,7 +33,9 @@
33
33
  justify-content: center;
34
34
  padding: 0 var(--uxf-button-px);
35
35
 
36
- @apply shadow-sm transition-colors;
36
+ @apply transition-colors;
37
+
38
+ box-shadow: theme("boxShadow.sm");
37
39
 
38
40
  &:focus-visible {
39
41
  @apply ring-2 ring-offset-2;
package/css/checkbox-button.css CHANGED
@@ -1,93 +1,147 @@
1
1
  .uxf-checkbox-button {
2
- @apply focus-visible:ring-primary relative inline-flex shrink-0 items-center justify-between space-x-4 rounded-lg bg-gray-200 px-4 py-3 outline-none transition before:absolute before:inset-0 before:rounded-lg before:border before:border-transparent before:transition focus-visible:ring-2 focus-visible:ring-offset-2;
2
+ align-items: center;
3
+ border-radius: theme("borderRadius.lg");
4
+ display: inline-flex;
5
+ flex-shrink: 0;
6
+ justify-content: space-between;
7
+ padding-block: theme("spacing.3");
8
+ padding-inline: theme("spacing.4");
9
+ position: relative;
10
+
11
+ @apply focus-visible:ring-primary space-x-4 transition before:absolute before:inset-0 before:rounded-lg before:border before:border-transparent before:transition focus-visible:ring-2 focus-visible:ring-offset-2;
12
+
13
+ background-color: theme("colors.gray.200");
14
+ outline: none;
3
15
 
4
16
  &__icon {
5
- @apply relative h-5 w-5 rounded bg-white p-1 text-transparent before:absolute before:inset-0 before:rounded before:border before:transition;
17
+ background-color: theme("colors.white");
18
+ border-radius: theme("borderRadius.DEFAULT");
19
+ color: transparent;
20
+ height: theme("spacing.5");
21
+ padding: theme("spacing.1");
22
+ position: relative;
23
+ width: theme("spacing.5");
24
+
25
+ @apply before:transition;
26
+
27
+ &::before {
28
+ border-radius: theme("borderRadius.DEFAULT");
29
+ border-style: solid;
30
+ border-width: 1px;
31
+ content: "";
32
+ inset: 0;
33
+ position: absolute;
34
+ }
6
35
  }
7
36
 
8
- @apply focus-visible:ring-primary bg-gray-200;
9
-
10
37
  :root .dark & {
11
- @apply focus-visible:ring-primary bg-gray-800 focus-visible:ring-offset-gray-900;
38
+ background-color: theme("colors.gray.800");
39
+
40
+ @apply focus-visible:ring-primary focus-visible:ring-offset-gray-900;
12
41
  }
13
42
 
14
43
  .uxf-checkbox-button__icon {
15
- @apply before:border-gray-600;
44
+ &::before {
45
+ border-color: theme("colors.gray.600");
46
+ }
16
47
 
17
48
  :root .dark & {
18
- @apply before:border-transparent;
49
+ &::before {
50
+ border-color: transparent;
51
+ }
19
52
  }
20
53
  }
21
54
 
22
55
  .uxf-checkbox-button__label {
23
- @apply text-gray-600;
56
+ color: theme("colors.gray.600");
24
57
 
25
58
  :root .dark & {
26
- @apply text-gray-400;
59
+ color: theme("colors.gray.400");
27
60
  }
28
61
  }
29
62
 
30
63
  &.is-selected {
31
- @apply bg-primary;
64
+ background-color: theme("colors.primary.DEFAULT");
32
65
 
33
66
  :root .dark & {
34
- @apply bg-primary text-white;
67
+ background-color: theme("colors.primary.DEFAULT");
68
+ color: theme("colors.white");
35
69
  }
36
70
 
37
71
  .uxf-checkbox-button__icon {
38
- @apply text-primary before:border-transparent;
72
+ color: theme("colors.primary.DEFAULT");
73
+
74
+ &::before {
75
+ border-color: transparent;
76
+ }
39
77
 
40
78
  :root .dark & {
41
- @apply text-primary before:border-transparent;
79
+ color: theme("colors.primary.DEFAULT");
80
+
81
+ &::before {
82
+ border-color: transparent;
83
+ }
42
84
  }
43
85
  }
44
86
 
45
87
  .uxf-checkbox-button__label {
46
- @apply text-white;
88
+ color: theme("colors.white");
47
89
 
48
90
  :root .dark & {
49
- @apply text-white;
91
+ color: theme("colors.white");
50
92
  }
51
93
  }
52
94
  }
53
95
 
54
96
  &.is-disabled {
55
- @apply pointer-events-none bg-gray-100;
97
+ background-color: theme("colors.gray.100");
98
+ pointer-events: none;
56
99
 
57
100
  :root .dark & {
58
- @apply pointer-events-none bg-gray-800;
101
+ background-color: theme("colors.gray.800");
102
+ pointer-events: none;
59
103
  }
60
104
 
61
105
  .uxf-checkbox-button__icon {
62
- @apply before:border-gray-300;
106
+ &::before {
107
+ border-color: theme("colors.gray.300");
108
+ }
63
109
  }
64
110
 
65
111
  &.is-selected {
66
- @apply bg-gray-300;
112
+ background-color: theme("colors.gray.300");
67
113
 
68
114
  :root .dark & {
69
- @apply bg-gray-600;
115
+ background-color: theme("colors.gray.600");
70
116
  }
71
117
 
72
118
  .uxf-checkbox-button__icon {
73
- @apply text-gray-400 before:border-transparent;
119
+ color: theme("colors.gray.400");
120
+
121
+ &::before {
122
+ border-color: transparent;
123
+ }
74
124
 
75
125
  :root .dark & {
76
- @apply text-gray-800;
126
+ color: theme("colors.gray.800");
77
127
  }
78
128
  }
79
129
 
80
130
  .uxf-checkbox-button__label {
81
- @apply text-white;
131
+ color: theme("colors.white");
82
132
  }
83
133
  }
84
134
  }
85
135
 
86
136
  &.is-invalid {
87
- @apply before:border-error;
137
+ &::before {
138
+ border-color: theme("colors.error.DEFAULT");
139
+ }
88
140
 
89
141
  :root .dark & {
90
- @apply before:border-error;
142
+ &::before {
143
+ border-color: theme("colors.error.DEFAULT");
144
+ }
91
145
  }
92
146
  }
93
147
  }
package/css/checkbox-input.css CHANGED
@@ -9,12 +9,11 @@
9
9
  }
10
10
 
11
11
  &__label {
12
- @apply text-gray-600;
13
-
12
+ color: theme("colors.gray.600");
14
13
  width: 100%;
15
14
 
16
15
  :root .dark & {
17
- @apply text-gray-400;
16
+ color: theme("colors.gray.400");
18
17
  }
19
18
 
20
19
  &--hidden {
package/css/checkbox.css CHANGED
@@ -1,71 +1,96 @@
1
1
  .uxf-checkbox {
2
- @apply focus-visible:before:border-primary relative flex shrink-0 items-center justify-center rounded border border-gray-400 bg-white outline-none transition focus-visible:before:absolute focus-visible:before:inset-[-5px] focus-visible:before:rounded-lg focus-visible:before:border-2;
2
+ align-items: center;
3
+ background-color: theme("colors.white");
4
+ border-radius: theme("borderRadius.DEFAULT");
5
+ display: flex;
6
+ flex-shrink: 0;
7
+ justify-content: center;
8
+ position: relative;
9
+
10
+ @apply focus-visible:before:border-primary transition focus-visible:before:absolute focus-visible:before:inset-[-5px] focus-visible:before:rounded-lg focus-visible:before:border-2;
11
+
12
+ border: 1px solid theme("colors.gray.400");
13
+ outline: none;
3
14
 
4
15
  :root .dark & {
5
- @apply focus-visible:before:border-primary border-gray-400 bg-gray-900;
16
+ @apply focus-visible:before:border-primary;
17
+
18
+ background-color: theme("colors.gray.900");
19
+ border-color: theme("colors.gray.400");
6
20
  }
7
21
 
8
22
  &__inner {
9
- @apply hidden;
23
+ display: none;
10
24
  }
11
25
 
12
26
  &--size-default {
13
- @apply h-4 w-4;
27
+ height: theme("spacing.4");
28
+ width: theme("spacing.4");
14
29
 
15
30
  .uxf-checkbox__inner {
16
- @apply h-2.5 w-2.5;
31
+ height: theme("spacing[2.5]");
32
+ width: theme("spacing[2.5]");
17
33
  }
18
34
  }
19
35
 
20
36
  &--size-lg {
21
- @apply size-6;
37
+ height: theme("spacing.6");
38
+ width: theme("spacing.6");
22
39
 
23
40
  .uxf-checkbox__inner {
24
- @apply h-4 w-4;
41
+ height: theme("spacing.4");
42
+ width: theme("spacing.4");
25
43
  }
26
44
  }
27
45
 
28
46
  &.is-selected {
29
- @apply bg-primary is-hoverable:bg-primary-700 border-transparent;
47
+ @apply is-hoverable:bg-primary-700;
48
+
49
+ background-color: theme("colors.primary.DEFAULT");
50
+ border-color: transparent;
30
51
 
31
52
  :root .dark & {
32
- @apply bg-primary is-hoverable:bg-primary-300 border-transparent;
53
+ @apply is-hoverable:bg-primary-300;
54
+
55
+ background-color: theme("colors.primary.DEFAULT");
56
+ border-color: transparent;
33
57
  }
34
58
 
35
59
  .uxf-checkbox__inner {
36
- @apply block text-white;
60
+ color: theme("colors.white");
61
+ display: block;
37
62
 
38
63
  :root .dark & {
39
- @apply text-white;
64
+ color: theme("colors.white");
40
65
  }
41
66
  }
42
67
  }
43
68
 
44
69
  &.is-disabled,
45
70
  &.is-readonly {
46
- @apply pointer-events-none;
71
+ pointer-events: none;
47
72
  }
48
73
 
49
74
  &.is-disabled {
50
- @apply border-gray-200;
75
+ border-color: theme("colors.gray.200");
51
76
 
52
77
  :root .dark & {
53
- @apply border-gray-600;
78
+ border-color: theme("colors.gray.600");
54
79
  }
55
80
 
56
81
  &.is-selected {
57
- @apply bg-gray-200;
82
+ background-color: theme("colors.gray.200");
58
83
 
59
84
  :root .dark & {
60
- @apply bg-gray-600;
85
+ background-color: theme("colors.gray.600");
61
86
  }
62
87
  }
63
88
 
64
89
  .uxf-checkbox__inner {
65
- @apply text-gray-400;
90
+ color: theme("colors.gray.400");
66
91
 
67
92
  :root .dark & {
68
- @apply text-gray-800;
93
+ color: theme("colors.gray.800");
69
94
  }
70
95
  }
71
96
  }
@@ -81,25 +106,25 @@
81
106
  }
82
107
 
83
108
  &.is-invalid {
84
- @apply border-error;
109
+ border-color: theme("colors.error.DEFAULT");
85
110
 
86
111
  :root .dark & {
87
- @apply border-error;
112
+ border-color: theme("colors.error.DEFAULT");
88
113
  }
89
114
 
90
115
  &.is-selected {
91
- @apply bg-error;
116
+ background-color: theme("colors.error.DEFAULT");
92
117
 
93
118
  :root .dark & {
94
- @apply bg-error;
119
+ background-color: theme("colors.error.DEFAULT");
95
120
  }
96
121
  }
97
122
 
98
123
  .uxf-checkbox__inner {
99
- @apply text-white;
124
+ color: theme("colors.white");
100
125
 
101
126
  :root .dark & {
102
- @apply text-white;
127
+ color: theme("colors.white");
103
128
  }
104
129
  }
105
130
  }
package/css/color-radio-group.css CHANGED
@@ -1,6 +1,8 @@
1
1
  .uxf-color-radio-group {
2
2
  &__option {
3
- @apply is-disabled:pointer-events-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-white;
3
+ border-radius: 9999px;
4
+
5
+ @apply is-disabled:pointer-events-none outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-white;
4
6
 
5
7
  :root .dark & {
6
8
  @apply focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-gray-900;
@@ -8,10 +10,12 @@
8
10
  }
9
11
 
10
12
  &__label {
11
- @apply mb-2;
13
+ margin-bottom: theme("spacing.2");
12
14
  }
13
15
 
14
16
  &__options-wrapper {
15
- @apply flex flex-wrap gap-3.5;
17
+ display: flex;
18
+ flex-wrap: wrap;
19
+ gap: theme("spacing[3.5]");
16
20
  }
17
21
  }
package/css/color-radio.css CHANGED
@@ -1,29 +1,52 @@
1
1
  .uxf-color-radio {
2
- @apply relative inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[color:var(--bg-color)];
2
+ align-items: center;
3
+ background-color: var(--bg-color);
4
+ border-radius: 9999px;
5
+ display: inline-flex;
6
+ flex-shrink: 0;
7
+ height: theme("spacing.7");
8
+ justify-content: center;
9
+ position: relative;
10
+ width: theme("spacing.7");
3
11
 
4
12
  &__color-label {
5
13
  @apply sr-only;
6
14
  }
7
15
 
8
16
  &__inner {
9
- @apply h-4 w-4 text-white opacity-0 transition-opacity;
17
+ color: theme("colors.white");
18
+ height: theme("spacing.4");
19
+ opacity: 0;
20
+ width: theme("spacing.4");
21
+
22
+ @apply transition-opacity;
10
23
  }
11
24
 
12
25
  &__inner--dark {
13
- @apply text-gray-900;
26
+ color: theme("colors.gray.900");
14
27
  }
15
28
 
16
29
  &.is-selected {
17
30
  .uxf-color-radio__inner {
18
- @apply opacity-100;
31
+ opacity: 1;
19
32
  }
20
33
  }
21
34
 
22
35
  &.is-disabled {
23
- @apply after:rounded-inherit pointer-events-none after:absolute after:inset-0 after:bg-white/50;
36
+ pointer-events: none;
37
+
38
+ &::after {
39
+ background-color: rgb(255 255 255 / 50%);
40
+ border-radius: inherit;
41
+ content: "";
42
+ inset: 0;
43
+ position: absolute;
44
+ }
24
45
 
25
46
  :root .dark & {
26
- @apply after:bg-black/50;
47
+ &::after {
48
+ background-color: rgb(0 0 0 / 50%);
49
+ }
27
50
  }
28
51
  }
29
52
  }
package/css/date-picker.css CHANGED
@@ -13,14 +13,17 @@
13
13
  margin-bottom: theme("spacing.4");
14
14
 
15
15
  &-title {
16
- @apply text-lightMedium is-hoverable:text-lightHigh;
16
+ @apply is-hoverable:text-lightHigh;
17
17
 
18
+ color: theme("colors.lightMedium");
18
19
  font-size: 14px;
19
20
  font-weight: theme("fontWeight.medium");
20
21
  text-align: center;
21
22
 
22
23
  :root .dark & {
23
- @apply text-darkMedium is-hoverable:text-darkHigh;
24
+ @apply is-hoverable:text-darkHigh;
25
+
26
+ color: theme("colors.darkMedium");
24
27
  }
25
28
  }
26
29
  }
package/css/dropzone.css CHANGED
@@ -10,8 +10,6 @@
10
10
  }
11
11
 
12
12
  &__label {
13
- @apply space-y-2;
14
-
15
13
  align-items: center;
16
14
  border: 2px dashed theme("borderColor.lightBorder");
17
15
  border-radius: inherit;
@@ -23,6 +21,8 @@
23
21
  justify-content: center;
24
22
  padding: theme("spacing.4");
25
23
 
24
+ @apply space-y-2;
25
+
26
26
  &__icon {
27
27
  height: theme("height.6");
28
28
  }
@@ -51,9 +51,15 @@
51
51
  }
52
52
 
53
53
  &__item {
54
- @apply space-x-3 sm:rounded-md sm:px-6;
54
+ @apply space-x-3;
55
55
 
56
56
  align-items: center;
57
+
58
+ @screen sm {
59
+ border-radius: theme("borderRadius.md");
60
+ padding-inline: theme("spacing.6");
61
+ }
62
+
57
63
  border-color: theme("borderColor.lightBorder");
58
64
  border-width: 1px;
59
65
  box-shadow: theme("boxShadow.sm");
package/css/error-message.css CHANGED
@@ -1,3 +1,6 @@
1
1
  .uxf-error-message {
2
- @apply text-error mt-1 block text-right;
2
+ color: theme("colors.error.DEFAULT");
3
+ display: block;
4
+ margin-top: theme("spacing.1");
5
+ text-align: right;
3
6
  }
package/css/file-input.css CHANGED
@@ -4,10 +4,12 @@
4
4
  }
5
5
 
6
6
  &__label {
7
- @apply flex cursor-pointer overflow-auto;
7
+ cursor: pointer;
8
+ display: flex;
9
+ overflow: auto;
8
10
 
9
11
  &.is-loading {
10
- @apply cursor-not-allowed;
12
+ cursor: not-allowed;
11
13
  }
12
14
 
13
15
  &.is-focused {
@@ -21,35 +23,47 @@
21
23
  &.is-invalid {
22
24
  .uxf-file-input__label__button,
23
25
  .uxf-file-input__label__wrapper {
24
- @apply border-error text-error;
26
+ border-color: theme("colors.error.DEFAULT");
27
+ color: theme("colors.error.DEFAULT");
25
28
 
26
29
  :root .dark & {
27
- @apply border-error text-error;
30
+ border-color: theme("colors.error.DEFAULT");
31
+ color: theme("colors.error.DEFAULT");
28
32
  }
29
33
  }
30
34
  }
31
35
 
32
36
  &__button {
33
- @apply border-gray-200 bg-gray-100 px-3;
37
+ background-color: theme("colors.gray.100");
38
+ border-color: theme("colors.gray.200");
39
+ padding-inline: theme("spacing.3");
34
40
 
35
41
  :root .dark & {
36
- @apply border-gray-700 bg-gray-800;
42
+ background-color: theme("colors.gray.800");
43
+ border-color: theme("colors.gray.700");
37
44
  }
38
45
 
39
46
  &:hover {
40
- @apply bg-gray-200;
47
+ background-color: theme("colors.gray.200");
41
48
 
42
49
  :root .dark & {
43
- @apply bg-gray-700;
50
+ background-color: theme("colors.gray.700");
44
51
  }
45
52
  }
46
53
  }
47
54
 
48
55
  &__wrapper {
49
- @apply flex w-full min-w-0 items-center justify-between rounded-r-md border border-gray-200 px-3;
56
+ align-items: center;
57
+ border: 1px solid theme("colors.gray.200");
58
+ border-radius: 0 theme("borderRadius.md") theme("borderRadius.md") 0;
59
+ display: flex;
60
+ justify-content: space-between;
61
+ min-width: 0;
62
+ padding-inline: theme("spacing.3");
63
+ width: 100%;
50
64
 
51
65
  :root .dark & {
52
- @apply border-gray-700;
66
+ border-color: theme("colors.gray.700");
53
67
  }
54
68
 
55
69
  &__file-name {
@@ -57,7 +71,12 @@
57
71
  }
58
72
 
59
73
  &__file-name-link {
60
- @apply truncate hover:underline hover:underline-offset-2;
74
+ @apply truncate;
75
+
76
+ &:hover {
77
+ text-decoration: underline;
78
+ text-underline-offset: 2px;
79
+ }
61
80
  }
62
81
  }
63
82
  }