Skip to content

Commit 08070c3

Browse files
stevegoltonstevegolton
committed
Tweak TextInput and Select styles to a simple box (shedding the material-theme)
1 parent cc7b51d commit 08070c3

File tree

6 files changed

+30
-73
lines changed

6 files changed

+30
-73
lines changed

‎ui/src/assets/theme_provider.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
scrollbar-color: var(--pf-color-border) var(--pf-color-background); /* thumb color track color */
2626

2727
&--light {
28+
--pf-color-void: white;
2829
--pf-color-background: white;
2930
--pf-color-background-secondary: #edf0f1;
3031
--pf-color-background-tertiary: #e3e9eb;
@@ -75,6 +76,7 @@
7576
}
7677

7778
&--dark {
79+
--pf-color-void: #101010;
7880
--pf-color-background: #222226;
7981
--pf-color-background-secondary: #343438;
8082
--pf-color-background-tertiary: #4a4c52;

‎ui/src/assets/widgets/form.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,17 +75,17 @@
7575
}
7676

7777
.pf-select:invalid {
78-
border-bottom-color: var(--pf-color-danger);
78+
border-color: var(--pf-color-danger);
7979
&:active,
8080
&:focus {
81-
box-shadow: 0 1px 0 0 var(--pf-color-danger);
81+
border-color: var(--pf-color-danger);
8282
}
8383
}
8484

8585
.pf-text-input:has(input:invalid) {
86-
border-bottom-color: var(--pf-color-danger);
86+
border-color: var(--pf-color-danger);
8787
&:has(input:focus) {
88-
box-shadow: 0 1px 0 0 var(--pf-color-danger);
88+
border-color: var(--pf-color-danger);
8989
}
9090
}
9191
}

‎ui/src/assets/widgets/multiselect_input.scss‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,9 @@
2121
font-size: inherit;
2222
outline: none; // Disable the default outline
2323
border: none; // Disable the default border
24-
border-bottom: solid 1px var(--pf-color-border); // Thin underline
25-
background: none;
26-
transition:
27-
border $anim-timing,
28-
box-shadow $anim-timing,
29-
background $anim-timing;
30-
31-
// Round only the top corners to avoid rounding the edges of the underline
32-
border-radius: $border-radius $border-radius 0 0;
24+
background: var(--pf-color-void);
25+
border: solid 1px var(--pf-color-border-secondary);
26+
border-radius: $border-radius;
3327

3428
input {
3529
outline: none;
@@ -70,16 +64,10 @@
7064

7165
// The gentle hover effect indicates this component is interactive
7266
&:hover {
73-
background: color_hover(transparent);
67+
border-color: var(--pf-color-border);
7468
}
7569

7670
&:focus-within {
77-
background: color_hover(transparent);
78-
border-bottom: solid 1px var(--pf-color-primary);
79-
80-
// The box-shadow thickens the bottom border, without adding to the height.
81-
// This is the same technique used by materializecss:
82-
// See https://materializecss.com/text-inputs.html
83-
box-shadow: 0 1px 0 var(--pf-color-primary);
71+
border-color: var(--pf-color-primary);
8472
}
8573
}

‎ui/src/assets/widgets/select.scss‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,34 +20,22 @@
2020
font-family: var(--pf-font-compact);
2121
font-size: inherit;
2222
outline: none; // Disable the default outline
23-
border: none; // Disable the default border
24-
border-bottom: solid 1px var(--pf-color-border); // Thin underline
25-
background: none;
23+
border: solid 1px var(--pf-color-border-secondary);
24+
background: var(--pf-color-void);
2625
color: inherit;
27-
transition:
28-
border $anim-timing,
29-
box-shadow $anim-timing,
30-
background $anim-timing;
31-
// Round only the top corners to avoid rounding the edges of the underline
32-
border-radius: $border-radius $border-radius 0 0;
26+
border-radius: $border-radius;
3327
cursor: pointer;
3428

3529
// Very opinionated min width for a select input
3630
// ... any smaller and it stops looking like a select input!
3731
min-width: 80px;
3832

3933
&:hover {
40-
background: color_hover(transparent);
34+
border-color: var(--pf-color-border);
4135
}
4236

4337
&:focus {
44-
background: color_hover(transparent);
45-
border-bottom: solid 1px var(--pf-color-primary);
46-
47-
// The box-shadow thickens the bottom border, without adding to the height.
48-
// This is the same technique used by materializecss:
49-
// See https://materializecss.com/text-inputs.html
50-
box-shadow: 0 1px 0 var(--pf-color-primary);
38+
border-color: var(--pf-color-primary);
5139
}
5240

5341
&[disabled] {

‎ui/src/assets/widgets/tag_input.scss‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,11 @@
2121
font-size: inherit;
2222
outline: none; // Disable the default outline
2323
border: none; // Disable the default border
24+
background: var(--pf-color-void);
2425
border-bottom: solid 1px var(--pf-color-border); // Thin underline
25-
background: none;
26-
transition:
27-
border $anim-timing,
28-
box-shadow $anim-timing,
29-
background $anim-timing;
30-
31-
// Round only the top corners to avoid rounding the edges of the underline
32-
border-radius: $border-radius $border-radius 0 0;
26+
border: solid 1px var(--pf-color-border-secondary);
27+
border-radius: $border-radius;
28+
padding: 2px 4px;
3329

3430
input {
3531
outline: none;
@@ -48,16 +44,10 @@
4844

4945
// The gentle hover effect indicates this component is interactive
5046
&:hover {
51-
background: color_hover(transparent);
47+
border: solid 1px var(--pf-color-border);
5248
}
5349

5450
&:focus-within {
55-
background: color_hover(transparent);
56-
border-bottom: solid 1px var(--pf-color-primary);
57-
58-
// The box-shadow thickens the bottom border, without adding to the height.
59-
// This is the same technique used by materializecss:
60-
// See https://materializecss.com/text-inputs.html
61-
box-shadow: 0 1px 0 var(--pf-color-primary);
51+
border: solid 1px var(--pf-color-primary);
6252
}
6353
}

‎ui/src/assets/widgets/text_input.scss‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,17 @@
1717
.pf-text-input {
1818
display: inline-flex;
1919
align-items: baseline;
20-
line-height: 1;
2120
font-family: var(--pf-font-compact);
2221
font-size: inherit;
23-
border-bottom: solid 1px var(--pf-color-border); // Thin underline
24-
background: none;
22+
outline: none; // Disable the default outline
2523
padding: 2px 4px;
26-
transition:
27-
border $anim-timing,
28-
box-shadow $anim-timing,
29-
background $anim-timing;
3024
gap: 4px;
25+
background: var(--pf-color-void);
26+
border: solid 1px var(--pf-color-border-secondary);
27+
border-radius: $border-radius;
3128

3229
&__input {
30+
appearance: none;
3331
font-size: inherit;
3432
line-height: inherit;
3533
font-family: inherit;
@@ -48,25 +46,16 @@
4846
&__left-icon {
4947
align-self: center;
5048
line-height: inherit;
51-
margin-inline: 2px;
49+
color: var(--pf-color-text-muted);
5250
}
5351

54-
// Round only the top corners to avoid rounding the edges of the underline
55-
border-radius: $border-radius $border-radius 0 0;
56-
5752
// The gentle hover effect indicates this component is interactive
5853
&:hover {
59-
background: color_hover(transparent);
54+
border-color: var(--pf-color-border);
6055
}
6156

6257
&:has(.pf-text-input__input:focus) {
63-
background: color_hover(transparent);
64-
border-bottom: solid 1px var(--pf-color-primary);
65-
66-
// The box-shadow thickens the bottom border, without adding to the height.
67-
// This is the same technique used by materializecss:
68-
// See https://materializecss.com/text-inputs.html
69-
box-shadow: 0 1px 0 var(--pf-color-primary);
58+
border-color: var(--pf-color-primary);
7059
}
7160

7261
&:has(.pf-text-input__input[disabled]) {

0 commit comments

Comments
 (0)