@muraldevkit/ui-toolkit 4.0.0 → 4.0.2

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 (11) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/styles/MrlAvatarButton/module.scss +1 -4
  3. package/dist/styles/MrlEditableTextInput/module.scss +22 -8
  4. package/dist/styles/MrlEditableTextarea/module.scss +6 -1
  5. package/dist/styles/MrlMenu/module.scss +2 -4
  6. package/dist/styles/MrlPanel/module.scss +1 -2
  7. package/dist/styles/MrlPanelStickyHeader/module.scss +1 -4
  8. package/dist/styles/MrlPopover/module.scss +1 -2
  9. package/dist/styles/MrlSidebar/module.scss +1 -5
  10. package/dist/styles.css +8 -8
  11. package/package.json +8 -14
package/dist/styles/MrlAvatarButton/module.scss CHANGED
@@ -10,13 +10,10 @@
10
10
  &::after {
11
11
  background-color: rgba(0, 0, 0, 0%);
12
12
  border-radius: var(--mrl-radii-03);
13
- bottom: 0;
14
13
  content: '';
15
14
  display: block;
16
- left: 0;
15
+ inset: 0;
17
16
  position: absolute;
18
- right: 0;
19
- top: 0;
20
17
  }
21
18
  &:focus-visible {
22
19
  @include mrl-focus;
package/dist/styles/MrlEditableTextInput/module.scss CHANGED
@@ -2,10 +2,17 @@
2
2
  @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
3
3
  @use '../../forms.global.scss' as *;
4
4
  @use './MrlEditableTextInput.variables.scss';
5
+ .MrlEditableTextInput-hover-button {
6
+ opacity: 0;
7
+ transition: opacity var(--mrl-duration-03) var(--mrl-timing-m2);
8
+ }
5
9
  .MrlEditableTextInput {
6
10
  @include mrl-text-inputs;
7
11
  @include mrl-text-inputs-read-only;
8
12
  @include mrl-focus($style: 'outline');
13
+ &:focus {
14
+ --mrl-text-input-border-color: transparent;
15
+ }
9
16
  &:not(:disabled):read-only {
10
17
  color: var(--mrl-text-input-color-read-only);
11
18
  pointer-events: auto;
@@ -23,6 +30,13 @@
23
30
  &::-webkit-search-results-decoration {
24
31
  display: none;
25
32
  }
33
+ &:not(:focus):hover {
34
+ background-color: var(--mrl-black-opacity-00);
35
+ }
36
+ &:focus-visible ~ .MrlEditableTextInput-hover-button,
37
+ &:focus-visible ~ .MrlEditableTextInput-right-button {
38
+ opacity: 0;
39
+ }
26
40
  }
27
41
  .MrlEditableTextInput--allowOnClick {
28
42
  &:not(:disabled):read-only {
@@ -33,7 +47,7 @@
33
47
  color: var(--mrl-text-input-border-color);
34
48
  padding-right: calc(
35
49
  var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) +
36
- var(--mrl-text-input-icon-offset)
50
+ var(--mrl-text-input-icon-offset)
37
51
  );
38
52
  position: absolute;
39
53
  right: var(--mrl-text-input-inset-horizontal);
@@ -45,7 +59,12 @@
45
59
  }
46
60
  }
47
61
  .MrlEditableTextInput--active {
48
- border-color: var(--mrl-text-input-border-color-hover);
62
+ &:focus-visible {
63
+ ~ .MrlEditableTextInput-right-button,
64
+ ~ .MrlEditableTextInput-hover-button {
65
+ opacity: 0;
66
+ }
67
+ }
49
68
  }
50
69
  .MrlEditableTextInput-dynamicIcon--active {
51
70
  color: var(--mrl-text-input-border-color-hover);
@@ -71,14 +90,9 @@
71
90
  .MrlEditableTextInput--wrapper {
72
91
  font-size: var(--mrl-type-size-text-small);
73
92
  position: relative;
74
- .MrlEditableTextInput-hover-button {
75
- opacity: 0;
76
- }
77
- &:hover,
78
- &:focus-within {
93
+ &:hover {
79
94
  .MrlEditableTextInput-hover-button {
80
95
  opacity: 1;
81
- transition: opacity var(--mrl-duration-03) var(--mrl-timing-m2);
82
96
  }
83
97
  }
84
98
  }
package/dist/styles/MrlEditableTextarea/module.scss CHANGED
@@ -6,6 +6,9 @@
6
6
  .MrlEditableTextarea {
7
7
  @include mrl-text-inputs;
8
8
  --mrl-text-input-border-color: var(--mrl-color-background);
9
+ &:focus {
10
+ --mrl-text-input-border-color: transparent;
11
+ }
9
12
  &:disabled {
10
13
  --mrl-text-input-border-color: var(--mrl-color-background);
11
14
  }
@@ -25,7 +28,9 @@
25
28
  }
26
29
  .MrlEditableTextarea-dynamicIcon {
27
30
  color: var(--mrl-text-input-border-color);
28
- padding-right: calc(var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) + var(--mrl-text-input-icon-offset));
31
+ padding-right: calc(
32
+ var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) + var(--mrl-text-input-icon-offset)
33
+ );
29
34
  position: absolute;
30
35
  right: var(--mrl-text-input-inset-horizontal);
31
36
  top: calc(var(--mrl-text-input-inset-vertical) + var(--mrl-line-width-border));
package/dist/styles/MrlMenu/module.scss CHANGED
@@ -26,15 +26,13 @@
26
26
  &--scrolling {
27
27
  padding-bottom: var(--mrl-spacing-04);
28
28
  ul[role='menu'] {
29
- overflow-x: hidden;
30
- overflow-y: auto;
29
+ overflow: hidden auto;
31
30
  }
32
31
  }
33
32
  &--ignore {
34
33
  max-height: calc(100vh - 32px);
35
34
  ul[role='menu'] {
36
- overflow-x: hidden;
37
- overflow-y: auto;
35
+ overflow: hidden auto;
38
36
  }
39
37
  }
40
38
  &--submenu {
package/dist/styles/MrlPanel/module.scss CHANGED
@@ -43,8 +43,7 @@ $mrl-panel-width: 16.75rem;
43
43
  }
44
44
  .MrlPanel--scrollable {
45
45
  outline: none;
46
- overflow-x: clip;
47
- overflow-y: scroll;
46
+ overflow: clip scroll;
48
47
  overflow-y: overlay;
49
48
  padding-left: var(--mrl-spacing-06);
50
49
  padding-right: var(--mrl-spacing-06);
package/dist/styles/MrlPanelStickyHeader/module.scss CHANGED
@@ -4,14 +4,11 @@
4
4
  top: 0;
5
5
  &::after {
6
6
  background: var(--mrl-color-background);
7
- bottom: 0;
8
7
  content: '';
9
8
  display: block;
10
- left: calc(-1 * var(--mrl-spacing-03));
9
+ inset: 0 calc(-1 * var(--mrl-spacing-03));
11
10
  pointer-events: all;
12
11
  position: absolute;
13
- right: calc(-1 * var(--mrl-spacing-03));
14
- top: 0;
15
12
  z-index: -1;
16
13
  }
17
14
  }
package/dist/styles/MrlPopover/module.scss CHANGED
@@ -42,8 +42,7 @@
42
42
  padding-right: 0;
43
43
  }
44
44
  &--scrolling--content {
45
- overflow-x: hidden;
46
- overflow-y: auto;
45
+ overflow: hidden auto;
47
46
  padding-right: calc(var(--mrl-popover-padding) - 4px);
48
47
  .MrlPopover--close {
49
48
  right: 8px;
package/dist/styles/MrlSidebar/module.scss CHANGED
@@ -4,7 +4,6 @@
4
4
  .MrlSidebar {
5
5
  align-items: stretch;
6
6
  margin-right: var(--mrl-spacing-05);
7
- text-align: center;
8
7
  width: $sidebar-width;
9
8
  &--mobile {
10
9
  align-items: stretch;
@@ -47,13 +46,10 @@
47
46
  }
48
47
  .MrlSidebar-overlay {
49
48
  background-color: rgba(0, 0, 0, 56%);
50
- bottom: 0;
51
- left: -10000px;
49
+ inset: 0 0 0 -10000px;
52
50
  opacity: 0;
53
51
  pointer-events: none;
54
52
  position: absolute;
55
- right: 0;
56
- top: 0;
57
53
  transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1);
58
54
  z-index: 1;
59
55
  &--visible {