NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-29 16:44:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

Adds the select arrows as part of the select background

Browse Source
This commit is contained in:
Tessa Kelly 2020-01-16 12:39:29 -08:00
parent c2f0f883bd
commit b6d5b413cf
1 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/Nri/Ui/Select/V7.elm
View File

@ -14,10 +14,9 @@ import Html.Styled.Events as Events
import Json.Decode exposing (Decoder)
import Nri.Ui
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Svg.V1 exposing (Svg)
import Nri.Ui.Css.VendorPrefixed as VendorPrefixed
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Util
import Svg.Styled as Svg
import Svg.Styled.Attributes as SvgAttributes
{-| A single possible choice.
@ -83,9 +82,12 @@ view config =
, Css.borderRadius (Css.px 8)
, Css.color Colors.gray20
, Css.cursor Css.pointer
, Fonts.baseFont
, Css.fontSize (Css.px 15)
, Css.height (Css.px 45)
, Css.width (Css.pct 100)
, Css.paddingLeft (Css.px 20)
, selectArrowsCss
]
[ onSelectHandler
, Attributes.id config.id
@ -122,16 +124,21 @@ niceId x =
"nri-select-" ++ Nri.Ui.Util.dashify (Nri.Ui.Util.removePunctuation x)
selectArrows : Svg
selectArrows =
Svg.svg
[ SvgAttributes.viewBox "0 0 12 16"
selectArrowsCss : Css.Style
selectArrowsCss =
Css.batch
[ """<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="16px" viewBox="0 0 12 16"><g fill="currentcolor"><path d="M2.10847,9.341803 C1.65347,8.886103 0.91427,8.886103 0.45857,9.341803 C0.23107,9.570003 0.11697,9.868203 0.11697,10.167103 C0.11697,10.465303 0.23107,10.763503 0.45857,10.991703 L5.12547,15.657903 C5.57977,16.114303 6.31897,16.114303 6.77537,15.657903 L11.44157,10.991703 C11.89727,10.536003 11.89727,9.797503 11.44157,9.341803 C10.98657,8.886103 10.24667,8.886103 9.79167,9.341803 L5.95007,13.182703 L2.10847,9.341803 Z"/><path d="M1.991556,6.658179 C1.536659,7.11394 0.797279,7.11394 0.3416911,6.658179 C0.1140698,6.43004 0,6.13173 0,5.83325 C0,5.53476 0.1140698,5.23645 0.3416911,5.00831 L5.008185,0.34182 C5.463081,-0.11394 6.202461,-0.11394 6.65805,0.34182 L11.32454,5.00831 C11.78031,5.4639 11.78031,6.202592 11.32454,6.658179 C10.86965,7.11394 10.13027,7.11394 9.674679,6.658179 L5.833118,2.81679 L1.991556,6.658179 Z"/></g></svg> """
|> urlUtf8
|> Css.property "background"
-- "appearance: none" removes the default dropdown arrows
, VendorPrefixed.property "appearance" "none"
, Css.backgroundRepeat Css.noRepeat
, Css.property "background-position" "center right 10px"
, Css.backgroundOrigin Css.contentBox
]
[ Svg.g
[ SvgAttributes.fill "currentcolor" ]
[ Svg.path [ SvgAttributes.d "M2.10847,9.341803 C1.65347,8.886103 0.91427,8.886103 0.45857,9.341803 C0.23107,9.570003 0.11697,9.868203 0.11697,10.167103 C0.11697,10.465303 0.23107,10.763503 0.45857,10.991703 L5.12547,15.657903 C5.57977,16.114303 6.31897,16.114303 6.77537,15.657903 L11.44157,10.991703 C11.89727,10.536003 11.89727,9.797503 11.44157,9.341803 C10.98657,8.886103 10.24667,8.886103 9.79167,9.341803 L5.95007,13.182703 L2.10847,9.341803 Z" ] []
, Svg.path [ SvgAttributes.d "M1.991556,6.658179 C1.536659,7.11394 0.797279,7.11394 0.3416911,6.658179 C0.1140698,6.43004 0,6.13173 0,5.83325 C0,5.53476 0.1140698,5.23645 0.3416911,5.00831 L5.008185,0.34182 C5.463081,-0.11394 6.202461,-0.11394 6.65805,0.34182 L11.32454,5.00831 C11.78031,5.4639 11.78031,6.202592 11.32454,6.658179 C10.86965,7.11394 10.13027,7.11394 9.674679,6.658179 L5.833118,2.81679 L1.991556,6.658179 Z" ] []
]
]
|> Nri.Ui.Svg.V1.fromHtml
|> Nri.Ui.Svg.V1.withColor Colors.azure
urlUtf8 : String -> String
urlUtf8 content =
"""url('data:image/svg+xml;utf8,""" ++ content ++ """')"""