Skip to content

Commit ddb077c

Browse files
pat270pat270
committed
feat(@clayui/css): LPD-53483 Adds inline-text-input
1 parent a9af679 commit ddb077c

File tree

3 files changed

+203
-4
lines changed

3 files changed

+203
-4
lines changed

‎packages/clay-css/src/scss/cadmin/variables/_forms.scss‎

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,59 @@ $cadmin-input-palette: map-deep-merge(
129129
white-space: nowrap,
130130
width: min-content,
131131
),
132+
'.form-control-fit-content': (
133+
max-width: 100%,
134+
'.form-control': (
135+
display: inline-flex,
136+
width: auto,
137+
),
138+
'.form-control-inset': (
139+
margin: 0,
140+
min-height: 0,
141+
min-width: 50px,
142+
width: auto,
143+
'&:empty:before': (
144+
color: $secondary,
145+
content: unquote("'\\FEFF' attr(placeholder)"),
146+
cursor: text,
147+
pointer-events: none,
148+
),
149+
'&:focus:empty:before': (
150+
content: none,
151+
),
152+
),
153+
'.form-control-hidden': (
154+
width: 0,
155+
),
156+
),
157+
'.inline-text-input': (
158+
'.form-control': (
159+
background-color: transparent,
160+
border-color: transparent,
161+
font-size: 1.75rem,
162+
font-weight: $font-weight-semi-bold,
163+
line-height: 1,
164+
padding: 0.3125rem 0 0.3125rem 1rem,
165+
'&:hover': (
166+
border-color: $secondary-l3,
167+
),
168+
),
169+
'.form-control-inset': (
170+
padding-right: 1rem,
171+
'&:focus ~ .form-control-indicator': (
172+
display: none,
173+
),
174+
'&[contenteditable="false"] ~ .form-control-indicator': (
175+
display: none,
176+
),
177+
),
178+
'.form-control-item': (
179+
padding-right: 1rem,
180+
),
181+
'.lexicon-icon': (
182+
font-size: 1rem,
183+
),
184+
),
132185
),
133186
$cadmin-input-palette
134187
);
@@ -421,9 +474,10 @@ $cadmin-form-control-inset: map-deep-merge(
421474
margin-bottom: $cadmin-form-control-inset-margin-y,
422475
margin-left: 8px,
423476
margin-top: $cadmin-form-control-inset-margin-y,
477+
max-width: 100%,
424478
min-height: $cadmin-form-control-inset-min-height,
479+
min-width: 50px,
425480
padding: 0,
426-
width: 50px,
427481
focus: (
428482
outline: 0,
429483
),
@@ -840,6 +894,14 @@ $cadmin-has-error: map-deep-merge(
840894
),
841895
),
842896
),
897+
'.inline-text-input': (
898+
'.form-control': (
899+
border-color: $input-danger-border-color,
900+
),
901+
'.form-control-indicator': (
902+
display: none,
903+
),
904+
),
843905
),
844906
$cadmin-has-error
845907
);
@@ -1010,6 +1072,14 @@ $cadmin-has-warning: map-deep-merge(
10101072
),
10111073
),
10121074
),
1075+
'.inline-text-input': (
1076+
'.form-control': (
1077+
border-color: $input-warning-border-color,
1078+
),
1079+
'.form-control-indicator': (
1080+
display: none,
1081+
),
1082+
),
10131083
),
10141084
$cadmin-has-warning
10151085
);
@@ -1180,6 +1250,14 @@ $cadmin-has-success: map-deep-merge(
11801250
),
11811251
),
11821252
),
1253+
'.inline-text-input': (
1254+
'.form-control': (
1255+
border-color: $input-success-border-color,
1256+
),
1257+
'.form-control-indicator': (
1258+
display: none,
1259+
),
1260+
),
11831261
),
11841262
$cadmin-has-success
11851263
);

‎packages/clay-css/src/scss/mixins/_forms.scss‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -607,8 +607,11 @@
607607
$_focus-within: map-get($map, focus-within);
608608

609609
@if ($_focus-within) {
610-
&:focus-within:has(input:focus) {
611-
@include clay-form-control-variant($_focus-within);
610+
&:focus-within {
611+
&:has(input:focus),
612+
&:has([contenteditable]:focus) {
613+
@include clay-form-control-variant($_focus-within);
614+
}
612615
}
613616
}
614617

@@ -644,6 +647,14 @@
644647
}
645648
}
646649

650+
$_readonly: map-get($map, readonly);
651+
652+
@if ($_readonly) {
653+
&[readonly] {
654+
@include clay-form-control-variant($_readonly);
655+
}
656+
}
657+
647658
// Disabled
648659
// HTML5 says that controls under a fieldset > legend:first-child won't be
649660
// disabled if the fieldset is disabled. Due to implementation difficulty, we
@@ -700,6 +711,22 @@
700711
}
701712
}
702713

714+
@each $key, $value in $map {
715+
@if not clay-is-map-unset($value) {
716+
$selector: if(
717+
starts-with($key, '.') or starts-with($key, '#'),
718+
$key,
719+
false
720+
);
721+
722+
@if ($selector) {
723+
#{$selector} {
724+
@include clay-map-to-css($value);
725+
}
726+
}
727+
}
728+
}
729+
703730
@include clay-generate-media-breakpoints($map);
704731
}
705732
}
@@ -1605,6 +1632,22 @@
16051632
}
16061633
}
16071634
}
1635+
1636+
@each $key, $value in $map {
1637+
@if not clay-is-map-unset($value) {
1638+
$selector: if(
1639+
starts-with($key, '.') or starts-with($key, '#'),
1640+
$key,
1641+
false
1642+
);
1643+
1644+
@if ($selector) {
1645+
#{$selector} {
1646+
@include clay-map-to-css($value);
1647+
}
1648+
}
1649+
}
1650+
}
16081651
}
16091652
}
16101653
}

‎packages/clay-css/src/scss/variables/_forms.scss‎

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,59 @@ $input-palette: map-deep-merge(
127127
white-space: nowrap,
128128
width: min-content,
129129
),
130+
'.form-control-fit-content': (
131+
max-width: 100%,
132+
'.form-control': (
133+
display: inline-flex,
134+
width: auto,
135+
),
136+
'.form-control-inset': (
137+
margin: 0,
138+
min-height: 0,
139+
min-width: 50px,
140+
width: auto,
141+
'&:empty:before': (
142+
color: $secondary,
143+
content: unquote("'\\FEFF' attr(placeholder)"),
144+
cursor: text,
145+
pointer-events: none,
146+
),
147+
'&:focus:empty:before': (
148+
content: none,
149+
),
150+
),
151+
'.form-control-hidden': (
152+
width: 0,
153+
),
154+
),
155+
'.inline-text-input': (
156+
'.form-control': (
157+
background-color: transparent,
158+
border-color: transparent,
159+
font-size: 1.75rem,
160+
font-weight: $font-weight-semi-bold,
161+
line-height: 1,
162+
padding: 0.3125rem 0 0.3125rem 1rem,
163+
'&:hover': (
164+
border-color: $secondary-l3,
165+
),
166+
),
167+
'.form-control-inset': (
168+
padding-right: 1rem,
169+
'&:focus ~ .form-control-indicator': (
170+
display: none,
171+
),
172+
'&[contenteditable="false"] ~ .form-control-indicator': (
173+
display: none,
174+
),
175+
),
176+
'.form-control-item': (
177+
padding-right: 1rem,
178+
),
179+
'.lexicon-icon': (
180+
font-size: 1rem,
181+
),
182+
),
130183
),
131184
$input-palette
132185
);
@@ -468,9 +521,10 @@ $form-control-inset: map-deep-merge(
468521
margin-bottom: $form-control-inset-margin-y,
469522
margin-left: 0.25rem,
470523
margin-top: $form-control-inset-margin-y,
524+
max-width: 100%,
471525
min-height: $form-control-inset-min-height,
526+
min-width: 50px,
472527
padding: 0,
473-
width: 50px,
474528
focus: (
475529
outline: 0,
476530
),
@@ -922,6 +976,14 @@ $has-error: map-deep-merge(
922976
),
923977
),
924978
),
979+
'.inline-text-input': (
980+
'.form-control': (
981+
border-color: $input-danger-border-color,
982+
),
983+
'.form-control-indicator': (
984+
display: none,
985+
),
986+
),
925987
),
926988
$has-error
927989
);
@@ -1075,6 +1137,14 @@ $has-warning: map-deep-merge(
10751137
),
10761138
),
10771139
),
1140+
'.inline-text-input': (
1141+
'.form-control': (
1142+
border-color: $input-warning-border-color,
1143+
),
1144+
'.form-control-indicator': (
1145+
display: none,
1146+
),
1147+
),
10781148
),
10791149
$has-warning
10801150
);
@@ -1228,6 +1298,14 @@ $has-success: map-deep-merge(
12281298
),
12291299
),
12301300
),
1301+
'.inline-text-input': (
1302+
'.form-control': (
1303+
border-color: $input-success-border-color,
1304+
),
1305+
'.form-control-indicator': (
1306+
display: none,
1307+
),
1308+
),
12311309
),
12321310
$has-success
12331311
);

0 commit comments

Comments
 (0)