File tree Expand file tree Collapse file tree 2 files changed +12
-2
lines changed Expand file tree Collapse file tree 2 files changed +12
-2
lines changed Original file line number Diff line number Diff line change 78
78
// Input is also touch target
79
79
input {
80
80
appearance : none ;
81
- height : 48 px ;
81
+ height : max ( 100 % , map . get ( $tokens , ' touch-target-size ' )) ;
82
82
outline : none ;
83
83
margin : 0 ;
84
84
position : absolute ;
85
- width : 100% ;
85
+ width : max ( 100% , map . get ( $tokens , ' touch-target-size ' )) ;
86
86
z-index : 1 ;
87
87
cursor : inherit ;
88
+ top : 50% ;
89
+ left : 50% ;
90
+ transform : translate (-50% , -50% );
88
91
}
89
92
90
93
:host ([touch-target = ' none' ]) input {
Original file line number Diff line number Diff line change @@ -79,6 +79,7 @@ $supported-tokens: (
79
79
' selected-track-color' ,
80
80
' state-layer-shape' ,
81
81
' state-layer-size' ,
82
+ ' touch-target-size' ,
82
83
' track-color' ,
83
84
' track-height' ,
84
85
' track-outline-color' ,
@@ -120,6 +121,12 @@ $_default: (
120
121
' handle-shape' ,
121
122
' track-shape'
122
123
);
124
+ $new-tokens : map .merge (
125
+ $new-tokens ,
126
+ (
127
+ ' touch-target-size' : if ($exclude-hardcoded-values , null , 48px )
128
+ )
129
+ );
123
130
124
131
$tokens : validate .values (
125
132
$tokens ,
You can’t perform that action at this time.
0 commit comments