Skip to content

Commit

Permalink
fix(modal): add safari media query for overflow indicator
Browse files Browse the repository at this point in the history
  • Loading branch information
emyarod committed Apr 27, 2021
1 parent 0a9703d commit dd66d8a
Showing 1 changed file with 12 additions and 2 deletions.
14 changes: 12 additions & 2 deletions packages/components/src/components/modal/_modal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -285,12 +285,22 @@
grid-column: 1/-1;
width: 100%;
height: rem(32px);
// Safari interprets `transparent` differently, so make color token value transparent instead:
background-image: linear-gradient(to bottom, rgba($layer, 0), $layer);
background-image: linear-gradient(to bottom, transparent, $layer);
content: '';
pointer-events: none;
}

// Safari-only media query
// won't appear correctly with CSS custom properties
// see: code snippet and tabs overflow indicators
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
.#{$prefix}--modal-content--overflow-indicator {
background-image: linear-gradient(to bottom, rgba($layer, 0), $layer);
}
}
}

.#{$prefix}--modal-content:focus
~ .#{$prefix}--modal-content--overflow-indicator {
width: calc(100% - 4px);
Expand Down

0 comments on commit dd66d8a

Please sign in to comment.