Lokasi ngalangkungan proxy:   [ UP ]  
[Ngawartoskeun bug]   [Panyetelan cookie]                
Skip to content

Commit 67d55a8

Browse files
zombieFoxzombieFox
committed
[design] improve form element focus states
1 parent 6979a36 commit 67d55a8

3 files changed

Lines changed: 57 additions & 30 deletions

File tree

‎src/css/auto-suggest.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,15 @@
5454
color: rgb(var(--form-input-text-hover));
5555
outline: none;
5656
text-decoration: none;
57-
box-shadow: var(--form-hover-ring);
57+
box-shadow: var(--form-ring-hover);
5858
}
5959

6060
.auto-suggest-link:focus {
6161
background-color: rgb(var(--theme-gray-01));
6262
color: rgb(var(--form-input-text-focus-active));
6363
outline: none;
6464
text-decoration: none;
65-
box-shadow: var(--form-focus-ring-accent);
65+
box-shadow: var(--form-ring-accent);
6666
}
6767

6868
.auto-suggest-link:active {

‎src/css/form.css‎

Lines changed: 47 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ select:hover {
5656
border-color: rgb(var(--form-input-border-hover));
5757
color: rgb(var(--form-label-hover));
5858
outline: none;
59-
box-shadow: var(--form-hover-ring);
59+
box-shadow: var(--form-ring-hover);
6060
}
6161

6262
select:focus,
@@ -69,7 +69,7 @@ select:active {
6969
color: rgb(var(--form-label-focus-active));
7070
outline: none;
7171
z-index: 2;
72-
box-shadow: var(--form-focus-ring-accent);
72+
box-shadow: var(--form-ring-accent);
7373
}
7474

7575
select:disabled,
@@ -115,7 +115,7 @@ textarea:hover {
115115
border-color: rgb(var(--form-input-border-hover));
116116
color: rgb(var(--form-input-text-hover));
117117
outline: none;
118-
box-shadow: var(--form-hover-ring);
118+
box-shadow: var(--form-ring-hover);
119119
}
120120

121121
textarea:focus,
@@ -124,7 +124,7 @@ textarea:active {
124124
border-color: rgb(var(--form-input-border-focus-active));
125125
color: rgb(var(--form-input-text-focus-active));
126126
outline: none;
127-
box-shadow: var(--form-focus-ring-accent);
127+
box-shadow: var(--form-ring-accent);
128128
}
129129

130130
textarea:disabled {
@@ -206,7 +206,7 @@ input[type="text"]:hover {
206206
border-color: rgb(var(--form-input-border-hover));
207207
color: rgb(var(--form-input-text-hover));
208208
outline: none;
209-
box-shadow: var(--form-hover-ring);
209+
box-shadow: var(--form-ring-hover);
210210
}
211211

212212
input[type="email"]:focus,
@@ -226,7 +226,7 @@ input[type="text"]:active {
226226
color: rgb(var(--form-input-text-focus-active));
227227
outline: none;
228228
z-index: 2;
229-
box-shadow: var(--form-focus-ring-accent);
229+
box-shadow: var(--form-ring-accent);
230230
}
231231

232232
input[type="email"]:disabled,
@@ -389,18 +389,18 @@ input[type="radio"]+label .label-icon {
389389
border-radius: 50%;
390390
}
391391

392-
input[type="checkbox"]:focus+label .label-icon,
393392
input[type="checkbox"]:hover+label .label-icon,
394-
input[type="radio"]:focus+label .label-icon,
395-
input[type="radio"]:hover+label .label-icon {
396-
background-color: rgb(var(--form-icon-focus-hover));
397-
box-shadow: var(--form-hover-ring);
393+
input[type="checkbox"]:focus+label .label-icon,
394+
input[type="radio"]:hover+label .label-icon,
395+
input[type="radio"]:focus+label .label-icon {
396+
background-color: rgb(var(--form-icon-hover));
397+
box-shadow: var(--form-ring-hover);
398398
}
399399

400400
input[type="checkbox"]:active+label .label-icon,
401401
input[type="radio"]:active+label .label-icon {
402402
background-color: rgb(var(--form-icon-active));
403-
box-shadow: var(--form-focus-ring-accent);
403+
box-shadow: var(--form-ring-accent);
404404
transition: none;
405405
}
406406

@@ -409,6 +409,13 @@ input[type="radio"]:checked+label .label-icon {
409409
background-color: rgb(var(--form-icon-checked));
410410
}
411411

412+
input[type="checkbox"]:checked:focus+label .label-icon,
413+
input[type="checkbox"]:checked:active+label .label-icon,
414+
input[type="radio"]:checked:focus+label .label-icon,
415+
input[type="radio"]:checked:active+label .label-icon {
416+
box-shadow: var(--form-ring-accent);
417+
}
418+
412419
input[type="checkbox"]:disabled+label .label-icon,
413420
input[type="checkbox"]:disabled:hover+label .label-icon,
414421
input[type="checkbox"]:disabled:focus+label .label-icon,
@@ -538,12 +545,12 @@ input[type="color"] {
538545

539546
input[type="color"]:hover {
540547
outline: none;
541-
box-shadow: var(--form-hover-ring);
548+
box-shadow: var(--form-ring-hover);
542549
}
543550

544551
input[type="color"]:focus {
545552
outline: none;
546-
box-shadow: var(--form-focus-ring);
553+
box-shadow: var(--form-ring-focus);
547554
}
548555

549556
input[type="color"]:disabled {
@@ -559,21 +566,31 @@ input[type="color"]:disabled:focus {
559566
input[type="color"]::-webkit-color-swatch-wrapper {
560567
border: 0;
561568
padding: 0;
569+
outline: none;
562570
}
563571

564572
input[type="color"]::-webkit-color-swatch {
565573
border: 0;
566574
padding: 0;
575+
outline: none;
567576
}
568577

569578
input[type="color"]::-moz-color-swatch-wrapper {
570579
border: 0;
571580
padding: 0;
581+
outline: none;
572582
}
573583

574584
input[type="color"]::-moz-color-swatch {
575585
border: 0;
576586
padding: 0;
587+
outline: none;
588+
}
589+
590+
input[type="color"]::-moz-focus-inner {
591+
border: 0;
592+
padding: 0;
593+
outline: none;
577594
}
578595

579596
/* range */
@@ -663,16 +680,20 @@ input[type="range"]:active::-webkit-slider-thumb {
663680
outline: none;
664681
}
665682

666-
input[type="range"]:focus::-webkit-slider-thumb,
667683
input[type="range"]:hover::-webkit-slider-thumb {
668-
background-color: rgb(var(--form-range-thumb-background-focus-hover));
669-
box-shadow: var(--form-hover-ring);
684+
background-color: rgb(var(--form-range-thumb-background-hover));
685+
box-shadow: var(--form-ring-hover);
670686
outline: none;
671687
}
672688

689+
input[type="range"]:focus::-webkit-slider-thumb {
690+
background-color: rgb(var(--form-range-thumb-background-focus));
691+
box-shadow: var(--form-ring-accent);
692+
}
693+
673694
input[type="range"]:active::-webkit-slider-thumb {
674695
background-color: rgb(var(--form-range-thumb-background-active));
675-
box-shadow: var(--form-focus-ring-accent);
696+
box-shadow: var(--form-ring-accent);
676697
}
677698

678699
input[type="range"]:disabled::-webkit-slider-thumb {
@@ -748,16 +769,20 @@ input[type="range"]:active::-moz-range-thumb {
748769
outline: none;
749770
}
750771

751-
input[type="range"]:focus::-moz-range-thumb,
752772
input[type="range"]:hover::-moz-range-thumb {
753-
background-color: rgb(var(--form-range-thumb-background-focus-hover));
754-
box-shadow: var(--form-hover-ring);
773+
background-color: rgb(var(--form-range-thumb-background-hover));
774+
box-shadow: var(--form-ring-hover);
755775
outline: none;
756776
}
757777

778+
input[type="range"]:focus::-moz-range-thumb {
779+
background-color: rgb(var(--form-range-thumb-background-focus));
780+
box-shadow: var(--form-ring-accent);
781+
}
782+
758783
input[type="range"]:active::-moz-range-thumb {
759784
background-color: rgb(var(--form-range-thumb-background-active));
760-
box-shadow: var(--form-focus-ring-accent);
785+
box-shadow: var(--form-ring-accent);
761786
}
762787

763788
input[type="range"]:disabled::-moz-range-thumb {

‎src/css/variables.css‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,8 @@
103103
--form-group-text-border-disabled: var(--theme-gray-01);
104104
--form-border-disabled: var(--theme-gray-02);
105105
--form-icon: var(--theme-gray-08);
106-
--form-icon-focus-hover: var(--theme-gray-18);
106+
--form-icon-hover: var(--theme-gray-16);
107+
--form-icon-focus: var(--theme-gray-18);
107108
--form-icon-active: var(--theme-style-text);
108109
--form-icon-checked: var(--theme-style-text);
109110
--form-icon-disabled: var(--theme-gray-04);
@@ -127,14 +128,15 @@
127128
--form-helper-disabled: var(--theme-gray-04);
128129
--form-thumb-size: 1.25em;
129130
--form-range-thumb-background: var(--theme-gray-16);
130-
--form-range-thumb-background-focus-hover: var(--theme-gray-18);
131+
--form-range-thumb-background-hover: var(--theme-gray-18);
132+
--form-range-thumb-background-focus: var(--theme-style-text);
131133
--form-range-thumb-background-active: var(--theme-style-text);
132134
--form-range-thumb-background-disabled: var(--theme-gray-03);
133135
--form-range-track-background: var(--theme-gray-06);
134136
--form-range-track-background-focus-hover: var(--theme-gray-04);
135137
--form-range-track-background-active: var(--theme-gray-03);
136138
--form-range-track-background-disabled: var(--theme-gray-02);
137-
--form-range-progress-background: var(--theme-gray-14);
139+
--form-range-progress-background: var(--theme-gray-08);
138140
--form-range-progress-background-active: var(--theme-accent);
139141
--form-range-progress-background-disabled: var(--theme-gray-02);
140142
--form-grid-background: var(--theme-gray-02);
@@ -147,9 +149,9 @@
147149
--form-grid-border-checked: var(--theme-accent);
148150
--form-grid-border-disabled: var(--theme-gray-04);
149151
--form-dropdown-background: var(--theme-gray-02);
150-
--form-hover-ring: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
151-
--form-focus-ring: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-gray-10), 0.25);
152-
--form-focus-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
152+
--form-ring-hover: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
153+
--form-ring-focus: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-gray-10), 0.25);
154+
--form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
153155
/* button */
154156
--button-background: var(--theme-gray-02);
155157
--button-background-focus-hover: var(--theme-gray-03);

0 commit comments

Comments
 (0)