@muraldevkit/ui-toolkit 4.35.1-dev-yPbC.1 → 4.35.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/components/svg/config.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/MrlEditableTextInput/module.scss +6 -0
- package/dist/styles/MrlEditableTextarea/global.scss +8 -0
- package/dist/styles/MrlEditableTextarea/module.scss +16 -5
- package/dist/styles/MrlMenuItem/module.scss +2 -1
- package/dist/styles.css +22 -454
- package/package.json +1 -1
|
@@ -92,6 +92,12 @@
|
|
|
92
92
|
font-size: var(--mrl-type-size-text-small);
|
|
93
93
|
position: relative;
|
|
94
94
|
&:hover {
|
|
95
|
+
.MrlEditableTextInput:not(:focus) {
|
|
96
|
+
background-color: var(--mrl-black-opacity-00);
|
|
97
|
+
}
|
|
98
|
+
.MrlEditableTextInput--readOnly {
|
|
99
|
+
background-color: var(--mrl-text-input-background);
|
|
100
|
+
}
|
|
95
101
|
.MrlEditableTextInput-hover-button {
|
|
96
102
|
opacity: 1;
|
|
97
103
|
}
|
|
@@ -13,4 +13,12 @@
|
|
|
13
13
|
display: flex;
|
|
14
14
|
flex-direction: column;
|
|
15
15
|
position: relative;
|
|
16
|
+
&:hover {
|
|
17
|
+
.MrlEditableTextarea:not(:focus) {
|
|
18
|
+
background-color: var(--mrl-black-opacity-00);
|
|
19
|
+
}
|
|
20
|
+
&.MrlEditableTextarea--readOnly {
|
|
21
|
+
background-color: var(--mrl-text-input-background);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
16
24
|
}
|
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
.MrlEditableTextarea {
|
|
7
7
|
@include mrl-text-inputs;
|
|
8
8
|
--mrl-text-input-border-color: var(--mrl-color-background);
|
|
9
|
+
min-height: 1.5rem;
|
|
10
|
+
padding-left: 0;
|
|
11
|
+
padding-right: var(--mrl-spacing-08);
|
|
12
|
+
resize: vertical;
|
|
9
13
|
&:focus {
|
|
10
14
|
--mrl-text-input-border-color: transparent;
|
|
11
15
|
}
|
|
@@ -20,12 +24,9 @@
|
|
|
20
24
|
color: var(--mrl-text-input-color-read-only);
|
|
21
25
|
--mrl-text-input-border-color: var(--mrl-color-background);
|
|
22
26
|
}
|
|
23
|
-
&:not(:focus):hover {
|
|
27
|
+
&:not(:focus, .MrlEditableTextarea--readOnly):hover {
|
|
24
28
|
background-color: var(--mrl-black-opacity-00);
|
|
25
29
|
}
|
|
26
|
-
padding-left: 0;
|
|
27
|
-
padding-right: var(--mrl-spacing-08);
|
|
28
|
-
resize: vertical;
|
|
29
30
|
}
|
|
30
31
|
.MrlEditableTextarea-dynamicIcon {
|
|
31
32
|
color: var(--mrl-text-input-border-color);
|
|
@@ -54,7 +55,7 @@
|
|
|
54
55
|
border: none;
|
|
55
56
|
color: inherit;
|
|
56
57
|
cursor: pointer;
|
|
57
|
-
height:
|
|
58
|
+
height: 1.25rem;
|
|
58
59
|
outline: none;
|
|
59
60
|
padding: 0;
|
|
60
61
|
}
|
|
@@ -65,3 +66,13 @@
|
|
|
65
66
|
.MrlEditibaleTextInput-errorIcon {
|
|
66
67
|
vertical-align: middle;
|
|
67
68
|
}
|
|
69
|
+
.MrlEditableTextarea--wrapper {
|
|
70
|
+
&:hover {
|
|
71
|
+
.MrlEditableTextarea:not(:focus) {
|
|
72
|
+
background-color: var(--mrl-black-opacity-00);
|
|
73
|
+
}
|
|
74
|
+
.MrlEditableTextarea--readOnly:not(:focus) {
|
|
75
|
+
background-color: var(--mrl-text-input-background);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
@@ -80,7 +80,8 @@ $space-inset-small: calc(var(--mrl-spacing-03) - var(--mrl-spacing-01));
|
|
|
80
80
|
justify-content: flex-start;
|
|
81
81
|
}
|
|
82
82
|
&:focus-visible {
|
|
83
|
-
|
|
83
|
+
outline: var(--mrl-line-width-focus) solid var(--mrl-color-focus);
|
|
84
|
+
outline-offset: var(--mrl-spacing-01);
|
|
84
85
|
}
|
|
85
86
|
&--submenuItem {
|
|
86
87
|
padding-right: 15px;
|