material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 01:20:23 +03:00
Code Issues Projects Releases Wiki Activity

fix: ripple and focus ring not centered in Safari

Browse Source 
PiperOrigin-RevId: 559826221
This commit is contained in:
Elizabeth Mitchell 2023-08-24 11:59:41 -07:00 committed by Copybara-Service
parent 9694191ec0
commit 0e8afc0175
4 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
checkbox/internal/_checkbox.scss
View File

@ -113,7 +113,7 @@ $_checkmark-bottom-left: 7px, -14px;
.container {
border-radius: inherit;
display: grid;
display: flex;
height: 100%;
place-content: center;
place-items: center;

2
radio/internal/_radio.scss
View File

@ -61,7 +61,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
}
.container {
display: grid;
display: flex;
height: 100%;
place-content: center;
place-items: center;

6
slider/internal/_slider.scss
View File

@ -263,7 +263,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
block-size: var(--_state-layer-size);
inline-size: var(--_state-layer-size);
border-radius: var(--_handle-shape);
display: grid;
display: flex;
place-content: center;
place-items: center;
}
@ -316,8 +317,9 @@ $_md-sys-shape: tokens.md-sys-shape-values();
.label {
position: absolute;
box-sizing: border-box;
display: grid;
display: flex;
padding: 4px;
place-content: center;
place-items: center;
border-radius: map.get($_md-sys-shape, 'corner-full');

3
switch/internal/_handle.scss
View File

@ -16,7 +16,8 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
@mixin styles() {
.handle-container {
display: grid;
display: flex;
place-content: center;
place-items: center;
position: relative;
// this easing is custom to perform the "overshoot" animation