@neatui/css 4.4.1 → 4.5.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.
- package/components/form/form@a/checkbox.scss +5 -4
- package/components/form/form@a/input.scss +16 -0
- package/components/form/form@a/textarea.scss +48 -0
- package/components/form/form@b/checkbox.scss +12 -4
- package/components/form/form@b/input.scss +8 -0
- package/components/form/form@b/textarea.scss +48 -0
- package/components/form/form@c/base.scss +1 -0
- package/components/form/form@c/checkbox.scss +10 -4
- package/components/form/form@c/input.scss +21 -17
- package/components/form/form@c/textarea.scss +67 -21
- package/components/form/form@c/upload.scss +6 -2
- package/components/form/form@d/checkbox.scss +5 -4
- package/components/form/form@d/input.scss +16 -0
- package/components/form/form@d/textarea.scss +48 -0
- package/dist/neatui.css +445 -47
- package/dist/neatui.min.css +1 -1
- package/dist/neatui.preview.css +445 -47
- package/dist/neatui.preview.min.css +1 -1
- package/package.json +1 -1
|
@@ -32,6 +32,10 @@ value 规定输入字段的默认值。
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
&[ui-form~=':block'] {
|
|
36
|
+
display: flex;
|
|
37
|
+
}
|
|
38
|
+
|
|
35
39
|
[type='checkbox'] {
|
|
36
40
|
appearance: none;
|
|
37
41
|
font-size: inherit;
|
|
@@ -122,10 +126,7 @@ value 规定输入字段的默认值。
|
|
|
122
126
|
animation: am-checkbox-a-2 ease-out 0.35s both;
|
|
123
127
|
}
|
|
124
128
|
|
|
125
|
-
|
|
126
|
-
& + * {
|
|
127
|
-
color: var(--co-main);
|
|
128
|
-
}
|
|
129
|
+
color: var(--co-main);
|
|
129
130
|
}
|
|
130
131
|
|
|
131
132
|
// 半选
|
|
@@ -105,6 +105,7 @@ value 规定输入字段的默认值。
|
|
|
105
105
|
|
|
106
106
|
// 撑满
|
|
107
107
|
&[ui-form~=':block'] {
|
|
108
|
+
display: flex;
|
|
108
109
|
width: 100%;
|
|
109
110
|
flex-grow: 1;
|
|
110
111
|
flex-shrink: 1;
|
|
@@ -127,6 +128,21 @@ value 规定输入字段的默认值。
|
|
|
127
128
|
box-shadow: 0 0 0 2px var(--co-#{$c}-o-sm) !important;
|
|
128
129
|
}
|
|
129
130
|
}
|
|
131
|
+
|
|
132
|
+
&[ui-form~='co:hover:#{$c}'] {
|
|
133
|
+
&:hover {
|
|
134
|
+
color: var(--co-#{$c}-text);
|
|
135
|
+
border: 1px solid var(--co-#{$c}-o-lm);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
&[ui-form~='co:focus:#{$c}'] {
|
|
140
|
+
&:focus-within {
|
|
141
|
+
color: var(--co-#{$c}-text);
|
|
142
|
+
border: 1px solid var(--co-#{$c}-o-lm);
|
|
143
|
+
box-shadow: 0 0 0 2px var(--co-#{$c}-o-sm) !important;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
130
146
|
}
|
|
131
147
|
|
|
132
148
|
// 预览
|
|
@@ -88,5 +88,53 @@ value 规定输入字段的默认值。
|
|
|
88
88
|
textarea {
|
|
89
89
|
width: 100%;
|
|
90
90
|
}
|
|
91
|
+
|
|
92
|
+
&[ui-form~='disabled'] {
|
|
93
|
+
cursor: not-allowed;
|
|
94
|
+
opacity: 0.5;
|
|
95
|
+
textarea {
|
|
96
|
+
cursor: not-allowed;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&[ui-form~='readonly'] {
|
|
101
|
+
cursor: text;
|
|
102
|
+
textarea {
|
|
103
|
+
cursor: text;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&[ui-form~=':block'] {
|
|
108
|
+
display: flex;
|
|
109
|
+
width: 100%;
|
|
110
|
+
flex-grow: 1;
|
|
111
|
+
flex-shrink: 1;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&[ui-form~='preview'] {
|
|
115
|
+
&,
|
|
116
|
+
&:hover,
|
|
117
|
+
&:focus-within {
|
|
118
|
+
cursor: default;
|
|
119
|
+
border-color: transparent !important;
|
|
120
|
+
background-color: transparent !important;
|
|
121
|
+
box-shadow: none !important;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
textarea {
|
|
125
|
+
cursor: default;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
$sz_base: 1.5em;
|
|
130
|
+
@each $s in $form-sz {
|
|
131
|
+
&[ui-form~='sz:#{$s}'] {
|
|
132
|
+
textarea {
|
|
133
|
+
height: $sz_base;
|
|
134
|
+
min-height: $sz_base;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
$sz_base: $sz_base + 0.5;
|
|
138
|
+
}
|
|
91
139
|
}
|
|
92
140
|
}
|
|
@@ -44,6 +44,10 @@ value 规定输入字段的默认值。
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
+
&[ui-form~=':block'] {
|
|
48
|
+
display: flex;
|
|
49
|
+
}
|
|
50
|
+
|
|
47
51
|
[type='checkbox'] {
|
|
48
52
|
appearance: none;
|
|
49
53
|
font-size: inherit;
|
|
@@ -69,10 +73,14 @@ value 规定输入字段的默认值。
|
|
|
69
73
|
radial-gradient(circle at 73.8% 28%, currentColor 3.9%, transparent 4.9%), radial-gradient(circle at 77.5% 23.7%, currentColor 3.4%, transparent 4.4%),
|
|
70
74
|
radial-gradient(circle at 81% 19.5%, currentColor 3%, transparent 4%), radial-gradient(circle at 85% 15.2%, currentColor 2.5%, transparent 3.5%);
|
|
71
75
|
animation: am-b-checked 0.3s;
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
+
color: var(--co-main);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&.part-checked,
|
|
80
|
+
&[part-checked] {
|
|
81
|
+
background: linear-gradient(0deg, transparent 41%, currentColor 42%, currentColor 58%, transparent 59%) no-repeat center / 60% 100%;
|
|
82
|
+
animation: am-b-checked 0.3s;
|
|
83
|
+
color: var(--co-main);
|
|
76
84
|
}
|
|
77
85
|
|
|
78
86
|
& + * {
|
|
@@ -88,8 +88,16 @@ value 规定输入字段的默认值。
|
|
|
88
88
|
opacity: 0.5;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
+
&[ui-form~='readonly'] {
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
input {
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
91
98
|
// 撑满
|
|
92
99
|
&[ui-form~=':block'] {
|
|
100
|
+
display: flex;
|
|
93
101
|
width: 100%;
|
|
94
102
|
flex-grow: 1;
|
|
95
103
|
flex-shrink: 1;
|
|
@@ -84,5 +84,53 @@ value 规定输入字段的默认值。
|
|
|
84
84
|
textarea {
|
|
85
85
|
width: 100%;
|
|
86
86
|
}
|
|
87
|
+
|
|
88
|
+
&[ui-form~='disabled'] {
|
|
89
|
+
cursor: not-allowed;
|
|
90
|
+
opacity: 0.5;
|
|
91
|
+
textarea {
|
|
92
|
+
cursor: not-allowed;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&[ui-form~='readonly'] {
|
|
97
|
+
cursor: text;
|
|
98
|
+
textarea {
|
|
99
|
+
cursor: text;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&[ui-form~=':block'] {
|
|
104
|
+
display: flex;
|
|
105
|
+
width: 100%;
|
|
106
|
+
flex-grow: 1;
|
|
107
|
+
flex-shrink: 1;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
&[ui-form~='preview'] {
|
|
111
|
+
&,
|
|
112
|
+
&:hover,
|
|
113
|
+
&:focus-within {
|
|
114
|
+
cursor: default;
|
|
115
|
+
border-color: transparent !important;
|
|
116
|
+
background-color: transparent !important;
|
|
117
|
+
box-shadow: none !important;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
textarea {
|
|
121
|
+
cursor: default;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
$sz_base: 1.5em;
|
|
126
|
+
@each $s in $form-sz {
|
|
127
|
+
&[ui-form~='sz:#{$s}'] {
|
|
128
|
+
textarea {
|
|
129
|
+
height: $sz_base;
|
|
130
|
+
min-height: $sz_base;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
$sz_base: $sz_base + 0.5;
|
|
134
|
+
}
|
|
87
135
|
}
|
|
88
136
|
}
|
|
@@ -72,10 +72,16 @@ value 规定输入字段的默认值。
|
|
|
72
72
|
linear-gradient(-45deg, transparent 59%, currentColor 60%) no-repeat 133% -20% / 70% 80%,
|
|
73
73
|
linear-gradient(45deg, transparent 65%, currentColor 66%) no-repeat 125% 0% / 50% 80%;
|
|
74
74
|
animation: am-checked 0.3s;
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
75
|
+
color: var(--co-main);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&.part-checked,
|
|
79
|
+
&[part-checked] {
|
|
80
|
+
background:
|
|
81
|
+
linear-gradient(0deg, transparent 41%, currentColor 42%, currentColor 58%, transparent 59%) no-repeat center / 55% 100%,
|
|
82
|
+
var(--bg-weak);
|
|
83
|
+
animation: am-checked 0.3s;
|
|
84
|
+
color: var(--co-main);
|
|
79
85
|
}
|
|
80
86
|
|
|
81
87
|
& + * {
|
|
@@ -25,7 +25,7 @@ value 规定输入字段的默认值。
|
|
|
25
25
|
border-radius: 0.35em;
|
|
26
26
|
transition: all 0.5s;
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
border: 1px solid var(--bg-weak);
|
|
29
29
|
background-color: var(--bg-weak);
|
|
30
30
|
|
|
31
31
|
display: inline-flex;
|
|
@@ -36,16 +36,11 @@ value 规定输入字段的默认值。
|
|
|
36
36
|
position: relative;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
&:hover {
|
|
40
|
-
border: 1px solid var(--co-main-o-mm);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
39
|
&.form-focus,
|
|
44
40
|
&:focus-within {
|
|
45
41
|
background-color: var(--bg-weak);
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
0 0 0 2px var(--co-main-o-ss);
|
|
42
|
+
border-color: var(--co-main-o-mm);
|
|
43
|
+
box-shadow: 0 0 0 2px var(--co-main-o-ss);
|
|
49
44
|
}
|
|
50
45
|
|
|
51
46
|
input {
|
|
@@ -87,8 +82,16 @@ value 规定输入字段的默认值。
|
|
|
87
82
|
opacity: 0.5;
|
|
88
83
|
}
|
|
89
84
|
|
|
85
|
+
&[ui-form~='readonly'] {
|
|
86
|
+
cursor: pointer;
|
|
87
|
+
input {
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
90
92
|
// 撑满
|
|
91
93
|
&[ui-form~=':block'] {
|
|
94
|
+
display: flex;
|
|
92
95
|
width: 100%;
|
|
93
96
|
flex-grow: 1;
|
|
94
97
|
flex-shrink: 1;
|
|
@@ -103,29 +106,30 @@ value 规定输入字段的默认值。
|
|
|
103
106
|
@each $c in $form-co {
|
|
104
107
|
&[ui-form~='co:#{$c}'] {
|
|
105
108
|
color: var(--co-#{$c}-text);
|
|
106
|
-
box-shadow:
|
|
107
|
-
inset 0 0 0 1px var(--co-#{$c}-o-ml),
|
|
108
|
-
0 0 0 2px var(--co-#{$c}-o-ss) !important;
|
|
109
109
|
background-color: var(--co-#{$c}-o-xs);
|
|
110
|
+
border-color: var(--co-#{$c}-o-xs);
|
|
111
|
+
|
|
112
|
+
&.form-focus,
|
|
113
|
+
&:focus-within {
|
|
114
|
+
border-color: var(--co-#{$c}-o-ml);
|
|
115
|
+
box-shadow: 0 0 0 2px var(--co-#{$c}-o-ss);
|
|
116
|
+
}
|
|
110
117
|
}
|
|
111
118
|
|
|
112
119
|
&[ui-form~='co:hover:#{$c}'] {
|
|
113
120
|
&:hover {
|
|
114
121
|
color: var(--co-#{$c}-text);
|
|
115
|
-
box-shadow:
|
|
116
|
-
inset 0 0 0 1px var(--co-#{$c}-o-ml),
|
|
117
|
-
0 0 0 2px var(--co-#{$c}-o-ss) !important;
|
|
118
122
|
background-color: var(--co-#{$c}-o-xs);
|
|
123
|
+
border-color: var(--co-#{$c}-o-xs);
|
|
119
124
|
}
|
|
120
125
|
}
|
|
121
126
|
|
|
122
127
|
&[ui-form~='co:focus:#{$c}'] {
|
|
123
128
|
&:focus-within {
|
|
124
129
|
color: var(--co-#{$c}-text);
|
|
125
|
-
box-shadow:
|
|
126
|
-
inset 0 0 0 1px var(--co-#{$c}-o-ml),
|
|
127
|
-
0 0 0 2px var(--co-#{$c}-o-ss) !important;
|
|
128
130
|
background-color: var(--co-#{$c}-o-xs);
|
|
131
|
+
border-color: var(--co-#{$c}-o-ml);
|
|
132
|
+
box-shadow: 0 0 0 2px var(--co-#{$c}-o-ss);
|
|
129
133
|
}
|
|
130
134
|
}
|
|
131
135
|
}
|
|
@@ -22,52 +22,98 @@ value 规定输入字段的默认值。
|
|
|
22
22
|
padding: 0.5em;
|
|
23
23
|
border-radius: 0.35em;
|
|
24
24
|
transition: all 0.5s;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
border: 1px solid var(--co-case);
|
|
25
|
+
border: 1px solid var(--bg-weak);
|
|
28
26
|
background-color: var(--bg-weak);
|
|
29
27
|
|
|
30
|
-
&:hover {
|
|
31
|
-
border: 1px solid var(--co-main-o-mm);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
28
|
&.form-focus,
|
|
35
|
-
&:focus {
|
|
36
|
-
background-color:
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
0 0 0 2px var(--co-main-o-ss);
|
|
29
|
+
&:focus-within {
|
|
30
|
+
background-color: var(--bg-weak);
|
|
31
|
+
border-color: var(--co-main-o-mm);
|
|
32
|
+
box-shadow: 0 0 0 2px var(--co-main-o-ss);
|
|
40
33
|
}
|
|
41
34
|
|
|
42
35
|
// 颜色
|
|
43
36
|
@each $c in $form-co {
|
|
44
37
|
&[ui-form~='co:#{$c}'] {
|
|
45
38
|
color: var(--co-#{$c}-text);
|
|
46
|
-
box-shadow:
|
|
47
|
-
inset 0 0 0 1px var(--co-#{$c}-o-ml),
|
|
48
|
-
0 0 0 2px var(--co-#{$c}-o-ss) !important;
|
|
49
39
|
background-color: var(--co-#{$c}-o-sl);
|
|
40
|
+
border-color: var(--co-#{$c}-o-sl);
|
|
41
|
+
|
|
42
|
+
&.form-focus,
|
|
43
|
+
&:focus-within {
|
|
44
|
+
border-color: var(--co-#{$c}-o-ml);
|
|
45
|
+
box-shadow: 0 0 0 2px var(--co-#{$c}-o-ss);
|
|
46
|
+
}
|
|
50
47
|
}
|
|
51
48
|
|
|
52
49
|
&[ui-form~='co:hover:#{$c}'] {
|
|
53
50
|
&:hover {
|
|
54
51
|
color: var(--co-#{$c}-text);
|
|
55
|
-
box-shadow:
|
|
56
|
-
inset 0 0 0 1px var(--co-#{$c}-o-ml),
|
|
57
|
-
0 0 0 2px var(--co-#{$c}-o-ss) !important;
|
|
58
52
|
background-color: var(--co-#{$c}-o-sl);
|
|
53
|
+
border-color: var(--co-#{$c}-o-sl);
|
|
59
54
|
}
|
|
60
55
|
}
|
|
61
56
|
|
|
62
57
|
&[ui-form~='co:focus:#{$c}'] {
|
|
63
58
|
&:focus-within {
|
|
64
59
|
color: var(--co-#{$c}-text);
|
|
65
|
-
box-shadow:
|
|
66
|
-
inset 0 0 0 1px var(--co-#{$c}-o-ml),
|
|
67
|
-
0 0 0 2px var(--co-#{$c}-o-ss) !important;
|
|
68
60
|
background-color: var(--co-#{$c}-o-sl);
|
|
61
|
+
border-color: var(--co-#{$c}-o-ml);
|
|
62
|
+
box-shadow: 0 0 0 2px var(--co-#{$c}-o-ss);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
textarea {
|
|
68
|
+
width: 100%;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&[ui-form~='disabled'] {
|
|
72
|
+
cursor: not-allowed;
|
|
73
|
+
opacity: 0.5;
|
|
74
|
+
textarea {
|
|
75
|
+
cursor: not-allowed;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&[ui-form~='readonly'] {
|
|
80
|
+
cursor: text;
|
|
81
|
+
textarea {
|
|
82
|
+
cursor: text;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&[ui-form~=':block'] {
|
|
87
|
+
display: flex;
|
|
88
|
+
width: 100%;
|
|
89
|
+
flex-grow: 1;
|
|
90
|
+
flex-shrink: 1;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&[ui-form~='preview'] {
|
|
94
|
+
&,
|
|
95
|
+
&:hover,
|
|
96
|
+
&:focus-within {
|
|
97
|
+
cursor: default;
|
|
98
|
+
border-color: transparent !important;
|
|
99
|
+
background-color: transparent !important;
|
|
100
|
+
box-shadow: none !important;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
textarea {
|
|
104
|
+
cursor: default;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
$sz_base: 1.5em;
|
|
109
|
+
@each $s in $form-sz {
|
|
110
|
+
&[ui-form~='sz:#{$s}'] {
|
|
111
|
+
textarea {
|
|
112
|
+
height: $sz_base;
|
|
113
|
+
min-height: $sz_base;
|
|
69
114
|
}
|
|
70
115
|
}
|
|
116
|
+
$sz_base: $sz_base + 0.5;
|
|
71
117
|
}
|
|
72
118
|
}
|
|
73
119
|
}
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
border-style: solid;
|
|
26
26
|
border-width: 1px;
|
|
27
27
|
|
|
28
|
-
border-color: var(--
|
|
28
|
+
border-color: var(--bg-weak);
|
|
29
29
|
background-color: var(--bg-weak);
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -137,8 +137,12 @@
|
|
|
137
137
|
[ui-form-input] {
|
|
138
138
|
@extend %item;
|
|
139
139
|
border-style: dashed;
|
|
140
|
+
border-color: var(--bg-weak);
|
|
140
141
|
|
|
141
|
-
|
|
142
|
+
&:hover,
|
|
143
|
+
&:focus-within {
|
|
144
|
+
border-color: var(--co-main-o-mm);
|
|
145
|
+
}
|
|
142
146
|
|
|
143
147
|
input {
|
|
144
148
|
position: absolute;
|
|
@@ -33,6 +33,10 @@ value 规定输入字段的默认值。
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
&[ui-form~=':block'] {
|
|
37
|
+
display: flex;
|
|
38
|
+
}
|
|
39
|
+
|
|
36
40
|
[type='checkbox'] {
|
|
37
41
|
appearance: none;
|
|
38
42
|
font-size: inherit;
|
|
@@ -107,10 +111,7 @@ value 规定输入字段的默认值。
|
|
|
107
111
|
animation: am-checkbox-a-2 ease-out 0.35s both;
|
|
108
112
|
}
|
|
109
113
|
|
|
110
|
-
|
|
111
|
-
& + * {
|
|
112
|
-
color: var(--co-main);
|
|
113
|
-
}
|
|
114
|
+
color: var(--co-main);
|
|
114
115
|
}
|
|
115
116
|
|
|
116
117
|
// 半选
|
|
@@ -112,6 +112,7 @@ value 规定输入字段的默认值。
|
|
|
112
112
|
|
|
113
113
|
// 撑满
|
|
114
114
|
&[ui-form~=':block'] {
|
|
115
|
+
display: flex;
|
|
115
116
|
width: 100%;
|
|
116
117
|
flex-grow: 1;
|
|
117
118
|
flex-shrink: 1;
|
|
@@ -137,6 +138,21 @@ value 规定输入字段的默认值。
|
|
|
137
138
|
box-shadow: 0 0 0 2px var(--co-#{$c}-o-ss) !important;
|
|
138
139
|
}
|
|
139
140
|
}
|
|
141
|
+
|
|
142
|
+
&[ui-form~='co:hover:#{$c}'] {
|
|
143
|
+
&:hover {
|
|
144
|
+
color: var(--co-#{$c}-text);
|
|
145
|
+
border: 1px solid var(--co-#{$c}-o-ml);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
&[ui-form~='co:focus:#{$c}'] {
|
|
150
|
+
&:focus-within {
|
|
151
|
+
color: var(--co-#{$c}-text);
|
|
152
|
+
border: 1px solid var(--co-#{$c}-o-ml);
|
|
153
|
+
box-shadow: 0 0 0 2px var(--co-#{$c}-o-ss) !important;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
140
156
|
}
|
|
141
157
|
|
|
142
158
|
// 预览
|
|
@@ -88,5 +88,53 @@ value 规定输入字段的默认值。
|
|
|
88
88
|
textarea {
|
|
89
89
|
width: 100%;
|
|
90
90
|
}
|
|
91
|
+
|
|
92
|
+
&[ui-form~='disabled'] {
|
|
93
|
+
cursor: not-allowed;
|
|
94
|
+
opacity: 0.5;
|
|
95
|
+
textarea {
|
|
96
|
+
cursor: not-allowed;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&[ui-form~='readonly'] {
|
|
101
|
+
cursor: text;
|
|
102
|
+
textarea {
|
|
103
|
+
cursor: text;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&[ui-form~=':block'] {
|
|
108
|
+
display: flex;
|
|
109
|
+
width: 100%;
|
|
110
|
+
flex-grow: 1;
|
|
111
|
+
flex-shrink: 1;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&[ui-form~='preview'] {
|
|
115
|
+
&,
|
|
116
|
+
&:hover,
|
|
117
|
+
&:focus-within {
|
|
118
|
+
cursor: default;
|
|
119
|
+
border-color: transparent !important;
|
|
120
|
+
background-color: transparent !important;
|
|
121
|
+
box-shadow: none !important;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
textarea {
|
|
125
|
+
cursor: default;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
$sz_base: 1.5em;
|
|
130
|
+
@each $s in $form-sz {
|
|
131
|
+
&[ui-form~='sz:#{$s}'] {
|
|
132
|
+
textarea {
|
|
133
|
+
height: $sz_base;
|
|
134
|
+
min-height: $sz_base;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
$sz_base: $sz_base + 0.5;
|
|
138
|
+
}
|
|
91
139
|
}
|
|
92
140
|
}
|