@muraldevkit/ui-toolkit 4.0.0 → 4.0.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.
- package/dist/index.js +1 -1
- package/dist/styles/MrlAvatarButton/module.scss +1 -4
- package/dist/styles/MrlEditableTextInput/module.scss +22 -8
- package/dist/styles/MrlEditableTextarea/module.scss +6 -1
- package/dist/styles/MrlMenu/module.scss +2 -4
- package/dist/styles/MrlPanel/module.scss +1 -2
- package/dist/styles/MrlPanelStickyHeader/module.scss +1 -4
- package/dist/styles/MrlPopover/module.scss +1 -2
- package/dist/styles/MrlSidebar/module.scss +1 -4
- package/dist/styles.css +8 -8
- package/package.json +8 -14
|
@@ -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
|
-
|
|
15
|
+
inset: 0;
|
|
17
16
|
position: absolute;
|
|
18
|
-
right: 0;
|
|
19
|
-
top: 0;
|
|
20
17
|
}
|
|
21
18
|
&:focus-visible {
|
|
22
19
|
@include mrl-focus;
|
|
@@ -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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
}
|
|
@@ -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(
|
|
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));
|
|
@@ -26,15 +26,13 @@
|
|
|
26
26
|
&--scrolling {
|
|
27
27
|
padding-bottom: var(--mrl-spacing-04);
|
|
28
28
|
ul[role='menu'] {
|
|
29
|
-
overflow
|
|
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
|
|
37
|
-
overflow-y: auto;
|
|
35
|
+
overflow: hidden auto;
|
|
38
36
|
}
|
|
39
37
|
}
|
|
40
38
|
&--submenu {
|
|
@@ -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
|
-
|
|
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
|
}
|
|
@@ -47,13 +47,10 @@
|
|
|
47
47
|
}
|
|
48
48
|
.MrlSidebar-overlay {
|
|
49
49
|
background-color: rgba(0, 0, 0, 56%);
|
|
50
|
-
|
|
51
|
-
left: -10000px;
|
|
50
|
+
inset: 0 0 0 -10000px;
|
|
52
51
|
opacity: 0;
|
|
53
52
|
pointer-events: none;
|
|
54
53
|
position: absolute;
|
|
55
|
-
right: 0;
|
|
56
|
-
top: 0;
|
|
57
54
|
transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1);
|
|
58
55
|
z-index: 1;
|
|
59
56
|
&--visible {
|