NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2025-01-08 07:27:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1355 from NoRedInk/fix-box-shadow-safari

Browse Source 
apply the box shadow to the inner <th> instead of the <tr>
This commit is contained in:
Brian Hicks 2023-04-12 08:37:09 -05:00 committed by GitHub
commit 602adff402
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Nri/Ui/Table/V7.elm
View File

@ -23,6 +23,7 @@ module Nri.Ui.Table.V7 exposing
import Accessibility.Styled.Style as Style
import Css exposing (..)
import Css.Animations
import Css.Global
import Html.Styled as Html exposing (..)
import Html.Styled.Attributes as Attributes exposing (css)
import Nri.Ui.Colors.V1 exposing (..)
@ -241,11 +242,15 @@ tableBody toRow items =
headersStyles : List Style
headersStyles =
[ -- We use a inset box shadown for a bottom border instead of an actual
[ -- We use a inset box shadow for a bottom border instead of an actual
-- border because with our use of `border-collapse: collapse`, the bottom
-- gray border sticks to the table instead of traveling with the header
-- when the header has `position: sticky` applied.
boxShadow4 inset (px 0) (px -3) gray75
--
-- We add the style on the children instead of on the parent because
-- `<tr>` tags do not display box shadows in Safari (although by the time
-- you read this, they may have fixed it. Feel free to try again!)
Css.Global.children [ Css.Global.th [ boxShadow4 inset (px 0) (px -3) gray75 ] ]
, height (px 45)
, fontSize (px 15)
]