Skip to content

Commit e52ae80

Browse files
zombieFoxzombieFox
committed
[design] improve form theme styles
1 parent 04ac0af commit e52ae80

File tree

4 files changed

+52
-42
lines changed

4 files changed

+52
-42
lines changed

‎src/css/auto-suggest.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,7 @@
3232

3333
.auto-suggest-link{
3434
padding:0.5em;
35-
border-width:var(--form-input-border);
36-
border-style: solid;
37-
border-color: transparent;
35+
border:0;
3836
border-radius:var(--theme-radius);
3937
width:100%;
4038
height:100%;

‎src/css/button.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ input[type="submit"]{
1414
border:0;
1515
border-top-width:var(--layout-line-width);
1616
border-bottom-width:var(--layout-line-width);
17-
border-style: solid;
1817
border-top-color: transparent;
1918
border-bottom-color:rgb(var(--button-border));
19+
border-style: solid;
2020
border-radius:var(--theme-radius);
2121
text-align: center;
2222
text-decoration: none;
@@ -68,7 +68,7 @@ button:disabled:focus,
6868
button:disabled:active,
6969
.button:disabled:active{
7070
background-color:rgb(var(--button-background-disabled));
71-
border-color:transparent;
71+
border-bottom-color:rgb(var(--button-border-disabled));
7272
color:rgb(var(--button-text-disabled));
7373
cursor: default;
7474
text-decoration: none;

‎src/css/form.css‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,12 @@ select{
3636
min-height:2.5em;
3737
min-width:0;
3838
width:100%;
39-
border:0;
39+
border-color:rgb(var(--form-input-border));
40+
border-width:var(--theme-line-width);
41+
border-style: solid;
4042
border-radius:var(--theme-radius);
4143
cursor: pointer;
42-
transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
44+
transition: background-color var(--layout-timing-extra-fast),border-color var(--layout-timing-extra-fast),color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
4345
-moz-appearance: none;
4446
-webkit-appearance: none;
4547
appearance: none;
@@ -50,6 +52,7 @@ select:hover{
5052
linear-gradient(45deg, transparent 50%,rgb(var(--form-label-hover)) 50%),
5153
linear-gradient(135deg,rgb(var(--form-label-hover)) 50%, transparent 50%);
5254
background-color:rgb(var(--form-input-background-hover));
55+
border-color:rgb(var(--form-input-border-hover));
5356
color:rgb(var(--form-label-hover));
5457
outline: none;
5558
box-shadow:var(--form-hover-ring);
@@ -60,7 +63,8 @@ select:active{
6063
background-image:
6164
linear-gradient(45deg, transparent 50%,rgb(var(--form-label-hover)) 50%),
6265
linear-gradient(135deg,rgb(var(--form-label-hover)) 50%, transparent 50%);
63-
background-color:rgb(var(--form-input-background-focus-active));
66+
background-color:rgb(var(--form-input-background-border-focus-active));
67+
border-color:rgb(var(--form-input-border-focus-active));
6468
color:rgb(var(--form-label-focus-active));
6569
outline: none;
6670
z-index:2;
@@ -75,6 +79,7 @@ select:disabled:active{
7579
background-image:
7680
linear-gradient(45deg, transparent 50%,rgb(var(--form-input-text-disabled)) 50%),
7781
linear-gradient(135deg,rgb(var(--form-input-text-disabled)) 50%, transparent 50%);
82+
border-color:rgb(var(--form-input-border-disabled));
7883
color:rgb(var(--form-input-text-disabled));
7984
cursor: default;
8085
box-shadow: none;
@@ -93,17 +98,20 @@ textarea{
9398
min-height:2.5em;
9499
min-width:0;
95100
width:100%;
96-
border:0;
101+
border-color:rgb(var(--form-input-border));
102+
border-width:var(--theme-line-width);
103+
border-style: solid;
97104
border-radius:var(--theme-radius);
98105
cursor: text;
99106
resize: vertical;
100107
display: block;
101-
transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
108+
transition: background-color var(--layout-timing-extra-fast),border-color var(--layout-timing-extra-fast),color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
102109
-moz-appearance: textfield;
103110
}
104111

105112
textarea:hover{
106113
background-color:rgb(var(--form-input-background-hover));
114+
border-color:rgb(var(--form-input-border-hover));
107115
color:rgb(var(--form-input-text-hover));
108116
outline: none;
109117
box-shadow:var(--form-hover-ring);
@@ -112,13 +120,15 @@ textarea:hover{
112120
textarea:focus,
113121
textarea:active{
114122
background-color:rgb(var(--form-input-background-focus-active));
123+
border-color:rgb(var(--form-input-border-focus-active));
115124
color:rgb(var(--form-input-text-focus-active));
116125
outline: none;
117126
box-shadow:var(--form-focus-ring-accent);
118127
}
119128

120129
textarea:disabled{
121130
background-color:rgb(var(--form-input-background-disabled));
131+
border-color:rgb(var(--form-input-border-disabled));
122132
color:rgb(var(--form-input-text-disabled));
123133
cursor: default;
124134
box-shadow: none;
@@ -166,10 +176,12 @@ input[type="text"]{
166176
height:2.5em;
167177
min-width:0;
168178
width:100%;
169-
border:0;
179+
border-color:rgb(var(--form-input-border));
180+
border-width:var(--theme-line-width);
181+
border-style: solid;
170182
border-radius:var(--theme-radius);
171183
cursor: text;
172-
transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
184+
transition: background-color var(--layout-timing-extra-fast),border-color var(--layout-timing-extra-fast),color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
173185
-moz-appearance: textfield;
174186
}
175187

@@ -190,6 +202,7 @@ input[type="search"]:hover,
190202
input[type="tel"]:hover,
191203
input[type="text"]:hover{
192204
background-color:rgb(var(--form-input-background-hover));
205+
border-color:rgb(var(--form-input-border-hover));
193206
color:rgb(var(--form-input-text-hover));
194207
outline: none;
195208
box-shadow:var(--form-hover-ring);
@@ -208,6 +221,7 @@ input[type="tel"]:active,
208221
input[type="text"]:focus,
209222
input[type="text"]:active{
210223
background-color:rgb(var(--form-input-background-focus-active));
224+
border-color:rgb(var(--form-input-border-focus-active));
211225
color:rgb(var(--form-input-text-focus-active));
212226
outline: none;
213227
z-index:2;
@@ -221,6 +235,7 @@ input[type="search"]:disabled,
221235
input[type="tel"]:disabled,
222236
input[type="text"]:disabled{
223237
background-color:rgb(var(--form-input-background-disabled));
238+
border-color:rgb(var(--form-input-border-disabled));
224239
color:rgb(var(--form-input-text-disabled));
225240
cursor: default;
226241
box-shadow: none;
@@ -623,10 +638,10 @@ input[type="range"]::-moz-range-thumb{
623638
margin:0;
624639
padding:0;
625640
border-width:0;
626-
border-radius:100%;
641+
border-radius:50%;
627642
position: relative;
628-
height:1.25em;
629-
width:1.25em;
643+
height:1.5em;
644+
width:1.5em;
630645
cursor: pointer;
631646
box-sizing: border-box;
632647
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
@@ -809,7 +824,7 @@ input[type="range"]:disabled::-moz-range-progress{
809824
.input-buttoninput[type="file"]:disabled:focus+label,
810825
.input-buttoninput[type="file"]:disabled:active+label{
811826
background-color:rgb(var(--button-background-disabled));
812-
border-color:transparent;
827+
border-bottom-color:rgb(var(--button-border-disabled));
813828
color:rgb(var(--button-text-disabled));
814829
cursor: default;
815830
}
@@ -1101,45 +1116,38 @@ input[type="range"]:disabled::-moz-range-progress{
11011116
align-items: center;
11021117
justify-content: center;
11031118
border:0;
1104-
border-top-width:var(--layout-line-width);
1105-
border-bottom-width:var(--layout-line-width);
1119+
border-width:var(--layout-line-width);
1120+
border-color:rgb(var(--form-group-text-border));
11061121
border-style: solid;
1107-
border-color: transparent;
11081122
border-radius:var(--theme-radius);
11091123
white-space: nowrap;
1110-
transition: background-color var(--layout-timing-extra-fast);
1124+
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
11111125
}
11121126

11131127
.form-group-text:hover,
11141128
.form-group-text:focus{
11151129
background-color:rgb(var(--form-group-text-background-focus-hover));
1130+
border-color:rgb(var(--form-group-text-border-focus-hover));
11161131
color:rgb(var(--form-input-text-hover));
11171132
outline: none;
11181133
}
11191134

11201135
.form-group-text:active{
11211136
background-color:rgb(var(--form-group-text-background-active));
1137+
border-color:rgb(var(--form-group-text-border-active));
11221138
color:rgb(var(--form-input-text-hover));
11231139
outline: none;
11241140
}
11251141

1126-
.form-group-text.disabled{
1127-
background-color:rgb(var(--form-group-text-background-disabled));
1128-
color:rgb(var(--form-input-text-disabled));
1129-
box-shadow: none;
1130-
cursor: default;
1131-
}
1132-
1142+
.form-group-text.disabled,
11331143
.form-group-text.disabled:hover,
1134-
.form-group-text.disabled:focus{
1135-
background-color:rgb(var(--form-group-text-background-disabled));
1136-
color:rgb(var(--form-input-text-disabled));
1137-
}
1138-
1144+
.form-group-text.disabled:focus,
11391145
.form-group-text.disable:active{
11401146
background-color:rgb(var(--form-group-text-background-disabled));
1147+
border-color:rgb(var(--form-group-text-border-disabled));
11411148
color:rgb(var(--form-input-text-disabled));
1142-
outline: none;
1149+
box-shadow: none;
1150+
cursor: default;
11431151
}
11441152

11451153
.form-group{
@@ -1270,15 +1278,15 @@ input[type="range"]:disabled::-moz-range-progress{
12701278
.form-dropdown-menu{
12711279
background-color:rgb(var(--form-dropdown-background));
12721280
border-radius:var(--theme-radius);
1273-
padding:0.5em0;
1281+
padding:var(--theme-radius)0;
12741282
position: absolute;
12751283
top:calc(100%+calc(var(--layout-line-width) *2));
12761284
left:0;
12771285
width:100%;
12781286
min-width:12em;
12791287
box-shadow:var(--layout-shadow-large);
1280-
display: none;
12811288
z-index:var(--z-index-dropdown);
1289+
display: none;
12821290
}
12831291

12841292
.form-dropdown-open .form-dropdown-menu{

‎src/css/variables.css‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -88,16 +88,19 @@
8888
--form-input-background:var(--theme-gray-02);
8989
--form-input-background-hover:var(--theme-gray-02);
9090
--form-input-background-focus-active:var(--theme-gray-01);
91-
--form-input-background-disabled:var(--theme-gray-02);
91+
--form-input-background-disabled:var(--theme-gray-01);
9292
--form-input-border:var(--theme-gray-02);
9393
--form-input-border-hover:var(--theme-gray-02);
9494
--form-input-border-focus-active:var(--theme-gray-01);
9595
--form-input-border-disabled:var(--theme-gray-01);
9696
--form-group-text-background:var(--theme-gray-02);
9797
--form-group-text-background-focus-hover:var(--theme-gray-02);
9898
--form-group-text-background-active:var(--theme-gray-02);
99-
--form-group-text-background-disabled:var(--theme-gray-02);
100-
--form-input-border-disabled:var(--theme-gray-02);
99+
--form-group-text-background-disabled:var(--theme-gray-01);
100+
--form-group-text-border:var(--theme-gray-02);
101+
--form-group-text-border-focus-hover:var(--theme-gray-02);
102+
--form-group-text-border-active:var(--theme-gray-02);
103+
--form-group-text-border-disabled:var(--theme-gray-01);
101104
--form-border-disabled:var(--theme-gray-02);
102105
--form-icon:var(--theme-gray-08);
103106
--form-icon-hover-focus:var(--theme-gray-20);
@@ -114,15 +117,15 @@
114117
--form-feedback-text-muted:var(--theme-gray-12);
115118
--form-feedback-text-disabled:var(--theme-gray-04);
116119
--form-feedback-background:var(--theme-gray-02);
117-
--form-feedback-background-disabled:var(--theme-gray-02);
120+
--form-feedback-background-disabled:var(--theme-gray-01);
118121
--form-feedback-border:var(--theme-gray-04);
119122
--form-feedback-border-disabled:var(--theme-gray-02);
120123
--form-helper:var(--theme-gray-12);
121124
--form-helper-disabled:var(--theme-gray-04);
122125
--form-range-thumb-background:var(--theme-gray-14);
123126
--form-range-thumb-background-focus-hover:var(--theme-gray-16);
124127
--form-range-thumb-background-active:var(--theme-style-text);
125-
--form-range-thumb-background-disabled:var(--theme-gray-04);
128+
--form-range-thumb-background-disabled:var(--theme-gray-03);
126129
--form-range-track-background:var(--theme-gray-06);
127130
--form-range-track-background-focus-hover:var(--theme-gray-04);
128131
--form-range-track-background-active:var(--theme-gray-03);
@@ -139,7 +142,7 @@
139142
--form-grid-background:var(--theme-gray-02);
140143
--form-grid-background-hover:var(--theme-gray-02);
141144
--form-grid-background-focus:var(--theme-gray-02);
142-
--form-grid-background-disabled:var(--theme-gray-02);
145+
--form-grid-background-disabled:var(--theme-gray-01);
143146
--form-grid-border:var(--theme-gray-08);
144147
--form-grid-border-hover-focus:var(--theme-gray-20);
145148
--form-grid-border-active:var(--theme-accent);
@@ -154,10 +157,11 @@
154157
--button-background:var(--theme-gray-02);
155158
--button-background-focus-hover:var(--theme-gray-03);
156159
--button-background-active:var(--theme-gray-04);
157-
--button-background-disabled:var(--theme-gray-02);
160+
--button-background-disabled:var(--theme-gray-01);
158161
--button-border:var(--theme-gray-02);
159162
--button-border-focus-hover:var(--theme-gray-08);
160163
--button-border-active:var(--theme-accent);
164+
--button-border-disabled:var(--theme-gray-01);
161165
--button-text:var(--theme-gray-12);
162166
--button-text-focus-hover:var(--theme-style-text);
163167
--button-text-focus-active:var(--theme-style-text);

0 commit comments

Comments
(0)