NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-24 06:02:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

Use Shadows component

Browse Source
This commit is contained in:
Tessa Kelly 2022-03-17 15:25:53 -07:00
parent 4e4f3165fe
commit 09fc94703c
6 changed files with 36 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Nri/Ui/Balloon/V1.elm
View File

@ -10,6 +10,14 @@ module Nri.Ui.Balloon.V1 exposing
{-| You propably want to use `Nri.Tooltip` not this.
This is used to display a ballon-like container.
# Changelog
## Patch changes
- use `Shadows`
@docs balloon
@ -31,6 +39,7 @@ import Css exposing (..)
import Html.Styled as Html exposing (Html, div, styled)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Shadows.V1 as Shadows
@ -275,7 +284,7 @@ viewBalloon theme_ width_ padding contents =
, Just (textAlign left)
, Just (position relative)
, Just (Css.borderRadius (px 8))
, Just (property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)")
, Just Shadows.high
, Just padding
, Just (balloonTheme theme_)
, width_

10
src/Nri/Ui/Container/V2.elm
View File

@ -11,6 +11,11 @@ module Nri.Ui.Container.V2 exposing
# Changelog
## Patch changes
- use `Shadows`
## Changes from V1
- removes fullHeight
@ -54,6 +59,7 @@ import Nri.Ui
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
import Nri.Ui.MediaQuery.V1 exposing (mobile)
import Nri.Ui.Shadows.V1 as Shadows
{-| -}
@ -152,7 +158,7 @@ defaultStyles : List Css.Style
defaultStyles =
[ borderRadius (px 8)
, border3 (px 1) solid Colors.gray92
, property "box-shadow" "0 0.8px 0.7px hsl(0deg 0% 0% / 0.1), 0 1px 1px -1.2px hsl(0deg 0% 0% / 0.1), 0 5px 2.5px -2.5px hsl(0deg 0% 0% / 0.1);"
, Shadows.low
, backgroundColor Colors.white
]
@ -236,7 +242,7 @@ pillowStyles : List Style
pillowStyles =
[ borderRadius (px 20)
, border3 (px 1) solid Colors.gray92
, property "box-shadow" "0 0.5px 0.7px hsl(0deg 0% 0% / 0.075), 0 1.6px 2px -0.8px hsl(0deg 0% 0% / 0.075), 0 4.1px 5.2px -1.7px hsl(0deg 0% 0% / 0.075), 5px 10px 12.6px -2.5px hsl(0deg 0% 0% / 0.075);"
, Shadows.medium
, backgroundColor Colors.white
, withMedia [ mobile ]
[ borderRadius (px 8)

9
src/Nri/Ui/Menu/V3.elm
View File

@ -8,7 +8,11 @@ module Nri.Ui.Menu.V3 exposing
, Entry, group, entry
)
{-| Changes from V2:
{-| Patch changes:
- Use `Shadows`
Changes from V2:
- Adpoted attribute pattern
- Added option to customize the z-index
@ -57,6 +61,7 @@ import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1
import Nri.Ui.Html.Attributes.V2 as AttributesExtra
import Nri.Ui.Html.V3 exposing (viewJust)
import Nri.Ui.Shadows.V1 as Shadows
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.UiIcon.V1 as UiIcon
@ -757,7 +762,7 @@ styleContent contentVisible config =
, zIndex (int <| config.zIndex + 1)
, backgroundColor Colors.white
, listStyle Css.none
, Css.property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)"
, Shadows.high
, before
[ property "content" "\"\""
, position absolute

4
src/Nri/Ui/Message/V3.elm
View File

@ -15,6 +15,7 @@ module Nri.Ui.Message.V3 exposing
- adds `notMobileCss`, `mobileCss`, `quizEngineMobileCss`
- adds `hideIconForMobile` and `hideIconFor`
- use `Shadows`
Changes from V2:
@ -75,6 +76,7 @@ import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
import Nri.Ui.MediaQuery.V1 as MediaQuery
import Nri.Ui.Shadows.V1 as Shadows
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
import Nri.Ui.UiIcon.V1 as UiIcon
@ -176,7 +178,7 @@ view attributes_ =
borderRadius (px 8)
, padding (px 20)
, backgroundColor_
, property "box-shadow" "0 0.8px 0.7px hsl(0deg 0% 0% / 0.1), 0 1px 1px -1.2px hsl(0deg 0% 0% / 0.1), 0 5px 2.5px -2.5px hsl(0deg 0% 0% / 0.1);"
, Shadows.low
, Css.Media.withMedia
[ Css.Media.all [ Css.Media.maxWidth (px 1000) ] ]
[ padding (px 15)

4
src/Nri/Ui/Modal/V11.elm
View File

@ -16,6 +16,7 @@ module Nri.Ui.Modal.V11 exposing
- adds `testId` helper
- adds data-nri-descriptions to the header, content, and footer
- use `Shadows`
# Changes from V10:
@ -176,6 +177,7 @@ import Nri.Ui.FocusTrap.V1 as FocusTrap exposing (FocusTrap)
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
import Nri.Ui.MediaQuery.V1 exposing (mobile)
import Nri.Ui.Shadows.V1 as Shadows
import Nri.Ui.SpriteSheet
import Nri.Ui.Svg.V1
import Task
@ -419,7 +421,7 @@ modalStyles =
-- Border
, borderRadius (px 20)
, property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)"
, Shadows.high
, Css.Media.withMedia [ mobile ]
[ borderRadius zero
]

4
src/Nri/Ui/Tooltip/V2.elm
View File

@ -27,6 +27,7 @@ Post-release patches:
- add containerCss
- adds `nriDescription` and `testId`
- fix <https://github.com/NoRedInk/noredink-ui/issues/766>
- use `Shadows`
Changes from V1:
@ -96,6 +97,7 @@ import Nri.Ui.ClickableSvg.V2 as ClickableSvg
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
import Nri.Ui.Shadows.V1 as Shadows
import Nri.Ui.UiIcon.V1 as UiIcon
import String.Extra
@ -769,7 +771,7 @@ pointerBox tail direction alignment =
, Css.fontSize (Css.px 16)
, Css.fontWeight (Css.int 600)
, Css.color Colors.white
, Css.property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)"
, Shadows.high
, Global.descendants [ Global.a [ Css.textDecoration Css.underline ] ]
, Global.descendants [ Global.a [ Css.color Colors.white ] ]
]