mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-24 06:02:36 +03:00
Merge pull request #866 from NoRedInk/bat/casts-a-shadow
Bat/casts a shadow
This commit is contained in:
commit
496d11b099
@ -10,6 +10,14 @@ module Nri.Ui.Balloon.V1 exposing
|
|||||||
{-| You propably want to use `Nri.Tooltip` not this.
|
{-| You propably want to use `Nri.Tooltip` not this.
|
||||||
This is used to display a ballon-like container.
|
This is used to display a ballon-like container.
|
||||||
|
|
||||||
|
|
||||||
|
# Changelog
|
||||||
|
|
||||||
|
|
||||||
|
## Patch changes
|
||||||
|
|
||||||
|
- use `Shadows`
|
||||||
|
|
||||||
@docs balloon
|
@docs balloon
|
||||||
|
|
||||||
|
|
||||||
@ -31,6 +39,7 @@ import Css exposing (..)
|
|||||||
import Html.Styled as Html exposing (Html, div, styled)
|
import Html.Styled as Html exposing (Html, div, styled)
|
||||||
import Nri.Ui.Colors.V1 as Colors
|
import Nri.Ui.Colors.V1 as Colors
|
||||||
import Nri.Ui.Fonts.V1 as Fonts
|
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 (textAlign left)
|
||||||
, Just (position relative)
|
, Just (position relative)
|
||||||
, Just (Css.borderRadius (px 8))
|
, 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 padding
|
||||||
, Just (balloonTheme theme_)
|
, Just (balloonTheme theme_)
|
||||||
, width_
|
, width_
|
||||||
|
@ -11,6 +11,11 @@ module Nri.Ui.Container.V2 exposing
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
|
||||||
|
## Patch changes
|
||||||
|
|
||||||
|
- use `Shadows`
|
||||||
|
|
||||||
|
|
||||||
## Changes from V1
|
## Changes from V1
|
||||||
|
|
||||||
- removes fullHeight
|
- removes fullHeight
|
||||||
@ -54,6 +59,7 @@ import Nri.Ui
|
|||||||
import Nri.Ui.Colors.V1 as Colors
|
import Nri.Ui.Colors.V1 as Colors
|
||||||
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
|
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
|
||||||
import Nri.Ui.MediaQuery.V1 exposing (mobile)
|
import Nri.Ui.MediaQuery.V1 exposing (mobile)
|
||||||
|
import Nri.Ui.Shadows.V1 as Shadows
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
{-| -}
|
||||||
@ -152,7 +158,7 @@ defaultStyles : List Css.Style
|
|||||||
defaultStyles =
|
defaultStyles =
|
||||||
[ borderRadius (px 8)
|
[ borderRadius (px 8)
|
||||||
, border3 (px 1) solid Colors.gray92
|
, 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
|
, backgroundColor Colors.white
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -236,7 +242,7 @@ pillowStyles : List Style
|
|||||||
pillowStyles =
|
pillowStyles =
|
||||||
[ borderRadius (px 20)
|
[ borderRadius (px 20)
|
||||||
, border3 (px 1) solid Colors.gray92
|
, 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
|
, backgroundColor Colors.white
|
||||||
, withMedia [ mobile ]
|
, withMedia [ mobile ]
|
||||||
[ borderRadius (px 8)
|
[ borderRadius (px 8)
|
||||||
|
@ -8,7 +8,11 @@ module Nri.Ui.Menu.V3 exposing
|
|||||||
, Entry, group, entry
|
, Entry, group, entry
|
||||||
)
|
)
|
||||||
|
|
||||||
{-| Changes from V2:
|
{-| Patch changes:
|
||||||
|
|
||||||
|
- Use `Shadows`
|
||||||
|
|
||||||
|
Changes from V2:
|
||||||
|
|
||||||
- Adpoted attribute pattern
|
- Adpoted attribute pattern
|
||||||
- Added option to customize the z-index
|
- 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.Fonts.V1
|
||||||
import Nri.Ui.Html.Attributes.V2 as AttributesExtra
|
import Nri.Ui.Html.Attributes.V2 as AttributesExtra
|
||||||
import Nri.Ui.Html.V3 exposing (viewJust)
|
import Nri.Ui.Html.V3 exposing (viewJust)
|
||||||
|
import Nri.Ui.Shadows.V1 as Shadows
|
||||||
import Nri.Ui.Svg.V1 as Svg
|
import Nri.Ui.Svg.V1 as Svg
|
||||||
import Nri.Ui.UiIcon.V1 as UiIcon
|
import Nri.Ui.UiIcon.V1 as UiIcon
|
||||||
|
|
||||||
@ -757,7 +762,7 @@ styleContent contentVisible config =
|
|||||||
, zIndex (int <| config.zIndex + 1)
|
, zIndex (int <| config.zIndex + 1)
|
||||||
, backgroundColor Colors.white
|
, backgroundColor Colors.white
|
||||||
, listStyle Css.none
|
, 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
|
, before
|
||||||
[ property "content" "\"\""
|
[ property "content" "\"\""
|
||||||
, position absolute
|
, position absolute
|
||||||
|
@ -15,6 +15,7 @@ module Nri.Ui.Message.V3 exposing
|
|||||||
|
|
||||||
- adds `notMobileCss`, `mobileCss`, `quizEngineMobileCss`
|
- adds `notMobileCss`, `mobileCss`, `quizEngineMobileCss`
|
||||||
- adds `hideIconForMobile` and `hideIconFor`
|
- adds `hideIconForMobile` and `hideIconFor`
|
||||||
|
- use `Shadows`
|
||||||
|
|
||||||
Changes from V2:
|
Changes from V2:
|
||||||
|
|
||||||
@ -75,6 +76,7 @@ import Nri.Ui.Colors.V1 as Colors
|
|||||||
import Nri.Ui.Fonts.V1 as Fonts
|
import Nri.Ui.Fonts.V1 as Fonts
|
||||||
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
|
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
|
||||||
import Nri.Ui.MediaQuery.V1 as MediaQuery
|
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.Svg.V1 as NriSvg exposing (Svg)
|
||||||
import Nri.Ui.UiIcon.V1 as UiIcon
|
import Nri.Ui.UiIcon.V1 as UiIcon
|
||||||
|
|
||||||
@ -176,7 +178,7 @@ view attributes_ =
|
|||||||
borderRadius (px 8)
|
borderRadius (px 8)
|
||||||
, padding (px 20)
|
, padding (px 20)
|
||||||
, backgroundColor_
|
, 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.withMedia
|
||||||
[ Css.Media.all [ Css.Media.maxWidth (px 1000) ] ]
|
[ Css.Media.all [ Css.Media.maxWidth (px 1000) ] ]
|
||||||
[ padding (px 15)
|
[ padding (px 15)
|
||||||
|
@ -14,8 +14,9 @@ module Nri.Ui.Modal.V11 exposing
|
|||||||
|
|
||||||
# Patch changes:
|
# Patch changes:
|
||||||
|
|
||||||
- adds `testId` helper
|
- adds `testId` helper
|
||||||
- adds data-nri-descriptions to the header, content, and footer
|
- adds data-nri-descriptions to the header, content, and footer
|
||||||
|
- use `Shadows`
|
||||||
|
|
||||||
|
|
||||||
# Changes from V10:
|
# 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.Fonts.V1 as Fonts
|
||||||
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
|
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
|
||||||
import Nri.Ui.MediaQuery.V1 exposing (mobile)
|
import Nri.Ui.MediaQuery.V1 exposing (mobile)
|
||||||
|
import Nri.Ui.Shadows.V1 as Shadows
|
||||||
import Nri.Ui.SpriteSheet
|
import Nri.Ui.SpriteSheet
|
||||||
import Nri.Ui.Svg.V1
|
import Nri.Ui.Svg.V1
|
||||||
import Task
|
import Task
|
||||||
@ -419,7 +421,7 @@ modalStyles =
|
|||||||
|
|
||||||
-- Border
|
-- Border
|
||||||
, borderRadius (px 20)
|
, 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 ]
|
, Css.Media.withMedia [ mobile ]
|
||||||
[ borderRadius zero
|
[ borderRadius zero
|
||||||
]
|
]
|
||||||
|
@ -27,6 +27,7 @@ Post-release patches:
|
|||||||
- add containerCss
|
- add containerCss
|
||||||
- adds `nriDescription` and `testId`
|
- adds `nriDescription` and `testId`
|
||||||
- fix <https://github.com/NoRedInk/noredink-ui/issues/766>
|
- fix <https://github.com/NoRedInk/noredink-ui/issues/766>
|
||||||
|
- use `Shadows`
|
||||||
|
|
||||||
Changes from V1:
|
Changes from V1:
|
||||||
|
|
||||||
@ -96,6 +97,7 @@ import Nri.Ui.ClickableSvg.V2 as ClickableSvg
|
|||||||
import Nri.Ui.Colors.V1 as Colors
|
import Nri.Ui.Colors.V1 as Colors
|
||||||
import Nri.Ui.Fonts.V1 as Fonts
|
import Nri.Ui.Fonts.V1 as Fonts
|
||||||
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
|
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
|
||||||
|
import Nri.Ui.Shadows.V1 as Shadows
|
||||||
import Nri.Ui.UiIcon.V1 as UiIcon
|
import Nri.Ui.UiIcon.V1 as UiIcon
|
||||||
import String.Extra
|
import String.Extra
|
||||||
|
|
||||||
@ -769,7 +771,7 @@ pointerBox tail direction alignment =
|
|||||||
, Css.fontSize (Css.px 16)
|
, Css.fontSize (Css.px 16)
|
||||||
, Css.fontWeight (Css.int 600)
|
, Css.fontWeight (Css.int 600)
|
||||||
, Css.color Colors.white
|
, 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.textDecoration Css.underline ] ]
|
||||||
, Global.descendants [ Global.a [ Css.color Colors.white ] ]
|
, Global.descendants [ Global.a [ Css.color Colors.white ] ]
|
||||||
]
|
]
|
||||||
|
@ -79,15 +79,14 @@ viewShadow : ( String, Css.Style ) -> Html msg
|
|||||||
viewShadow ( usageGuidance, shadow ) =
|
viewShadow ( usageGuidance, shadow ) =
|
||||||
Html.div
|
Html.div
|
||||||
[ Attributes.css
|
[ Attributes.css
|
||||||
[ Css.padding2 (Css.px 10) Css.zero
|
[ Css.margin2 (Css.px 20) (Css.px 4)
|
||||||
, Css.margin2 (Css.px 20) (Css.px 4)
|
|
||||||
, Css.borderRadius (Css.px 8)
|
|
||||||
, Css.height (Css.px 16)
|
|
||||||
, shadow
|
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
[ Text.smallBodyGray
|
[ Text.smallBodyGray
|
||||||
[ Text.css [ Css.textAlign Css.center ]
|
[ Text.css
|
||||||
|
[ Css.textAlign Css.center
|
||||||
|
, shadow
|
||||||
|
]
|
||||||
, Text.plaintext usageGuidance
|
, Text.plaintext usageGuidance
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
Loading…
Reference in New Issue
Block a user