Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit 0db5e54

Browse files
committed
Fix paddings for textfields
1 parent e013bdc commit 0db5e54

File tree

3 files changed

+26
-7
lines changed

3 files changed

+26
-7
lines changed

‎stylesheets/json-form-element.css

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
.jf-element {
2-
display: flex;
2+
display: inline-flex;
33
flex-direction: column;
4-
margin-top: 16px;
54
margin-bottom: 16px;
5+
margin-right: 16px;
6+
max-width: 300px;
67
}
78

89
.jf-element--hidden {
@@ -11,8 +12,9 @@
1112

1213
.jf-helper-text {
1314
margin-top: 8px;
14-
margin-left: 12px;
15+
padding-left: 12px;
1516
color: rgba(0, 0, 0, 0.54);
17+
box-sizing: border-box;
1618
}
1719

1820
.jf-element--invalid .jf-helper-text {

‎stylesheets/switch.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@
9999
max-width: calc(100% - 44px);
100100
font-size: 12px;
101101
color: rgba(0, 0, 0, 0.54);
102+
padding-top: 4px;
102103
}
103104

104105
.jf-switch--invalid .jf-textfield__helper-text {

‎stylesheets/textfield.css

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,35 @@
44
--large-font-size: 16px;
55
--side-padding: 12px;
66
--filled-background: rgba(0, 0, 0, 0.09);
7-
--top-padding: 20px;
8-
--bottom-padding: 17px;
7+
--top-padding: 22px;
8+
--bottom-padding: 13px;
99
}
1010

1111
.jf-textfield--dense {
1212
--field-height: 44px;
1313
--label-top: 17px;
1414
--large-font-size: 12px;
1515
--side-padding: 8px;
16+
--top-padding: 22px;
17+
--bottom-padding: 13px;
18+
}
19+
20+
.jf-textfield--dense.jf-textfield--outlined {
1621
--top-padding: 13px;
1722
--bottom-padding: 13px;
1823
}
1924

25+
.jf-textfield--dense.jf-textfield--multiline {
26+
--top-padding: 22px;
27+
--bottom-padding: 6px;
28+
}
29+
30+
.jf-textfield--multiline {
31+
--top-padding: 23px;
32+
--bottom-padding: 6px;
33+
}
34+
35+
2036
.jf-textfield {
2137
position: relative;
2238
height: var(--field-height);
@@ -72,7 +88,7 @@
7288
padding-left: var(--side-padding);
7389
padding-right: var(--side-padding);
7490
padding-top: var(--top-padding);
75-
padding-bottom: 12px;
91+
padding-bottom: var(--bottom-padding);
7692
width: 100%;
7793
background: 0 0;
7894
text-align: left;
@@ -288,7 +304,7 @@
288304
color: var(--color-invalid);
289305
}
290306

291-
.jf-textfield--invalid .jf-textfield__input {
307+
.jf-textfield--has-icon .jf-textfield__input {
292308
padding-right: 40px;
293309
}
294310

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /