mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-28 01:45:20 +03:00
Merge pull request #3 from NoRedInk/upgrade-elm-css
Upgrade elm-css to version 13
This commit is contained in:
Richard Feldman
GitHub
commit
4baa499025
@ -24,12 +24,12 @@
|
||||
"Nri.Ui.TextInput.V1"
|
||||
],
|
||||
"dependencies": {
|
||||
"NoRedInk/nri-elm-css": "5.0.0 <= v <= 5.0.0",
|
||||
"NoRedInk/nri-elm-css": "5.0.0 <= v < 6.0.0",
|
||||
"NoRedInk/view-extra": "2.0.0 <= v < 3.0.0",
|
||||
"elm-lang/core": "5.1.1 <= v < 6.0.0",
|
||||
"elm-lang/html": "2.0.0 <= v < 3.0.0",
|
||||
"pablohirafuji/elm-markdown": "2.0.4 <= v < 3.0.0",
|
||||
"rtfeldman/elm-css": "11.2.0 <= v < 12.0.0",
|
||||
"rtfeldman/elm-css": "13.1.1 <= v < 14.0.0",
|
||||
"rtfeldman/elm-css-helpers": "2.1.0 <= v < 3.0.0",
|
||||
"rtfeldman/elm-css-util": "1.0.2 <= v < 2.0.0",
|
||||
"tesk9/accessible-html": "3.0.0 <= v < 4.0.0",
|
||||
|
||||
@ -23,7 +23,8 @@ module Nri.Ui.Alert.V1
|
||||
|
||||
import Accessibility
|
||||
import Css
|
||||
import Css.Elements
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Html exposing (Html)
|
||||
import Markdown
|
||||
import Nri.Colors
|
||||
@ -92,7 +93,7 @@ type CssClasses
|
||||
styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
|
||||
styles =
|
||||
Nri.Ui.Styles.V1.styles "Nri-Ui-Alert-"
|
||||
[ Css.class Alert
|
||||
[ Css.Foreign.class Alert
|
||||
[ Css.displayFlex
|
||||
, Css.fontSize (Css.px 13)
|
||||
, Css.lineHeight (Css.num 1.2)
|
||||
@ -100,10 +101,10 @@ styles =
|
||||
, Css.overflow Css.hidden
|
||||
, Css.padding4 (Css.px 6) (Css.px 8) (Css.px 8) (Css.px 30)
|
||||
, Css.position Css.relative
|
||||
, Css.children
|
||||
[ Css.Elements.div
|
||||
[ Css.children
|
||||
[ Css.Elements.p
|
||||
, Css.Foreign.children
|
||||
[ Css.Foreign.div
|
||||
[ Css.Foreign.children
|
||||
[ Css.Foreign.p
|
||||
[ Css.margin Css.zero
|
||||
]
|
||||
]
|
||||
@ -121,25 +122,25 @@ styles =
|
||||
, Css.width (Css.px 25)
|
||||
]
|
||||
]
|
||||
, Css.class Error
|
||||
, Css.Foreign.class Error
|
||||
[ Css.color Nri.Colors.purple
|
||||
, Css.after
|
||||
[ Css.backgroundColor Nri.Colors.purple
|
||||
]
|
||||
]
|
||||
, Css.class Success
|
||||
, Css.Foreign.class Success
|
||||
[ Css.color Nri.Colors.greenDarkest
|
||||
, Css.after
|
||||
[ Css.backgroundColor Nri.Colors.green
|
||||
]
|
||||
]
|
||||
, Css.class Tip
|
||||
, Css.Foreign.class Tip
|
||||
[ Css.color Nri.Colors.navy
|
||||
, Css.after
|
||||
[ Css.backgroundColor Nri.Colors.white
|
||||
]
|
||||
]
|
||||
, Css.class Warning
|
||||
, Css.Foreign.class Warning
|
||||
[ Css.color Nri.Colors.red
|
||||
, Css.after
|
||||
[ Css.backgroundColor Nri.Colors.red
|
||||
|
||||
@ -17,7 +17,8 @@ module Nri.Ui.BannerAlert.V1
|
||||
|
||||
import Accessibility
|
||||
import Css
|
||||
import Css.Elements
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Html exposing (Html)
|
||||
import Nri.Colors
|
||||
import Nri.Fonts
|
||||
@ -71,35 +72,35 @@ type CssClasses
|
||||
styles : Nri.Ui.Styles.V1.Styles Never CssClasses b
|
||||
styles =
|
||||
Nri.Ui.Styles.V1.styles "Nri-Ui-BannerAlert-"
|
||||
[ Css.class AlertMessage
|
||||
[ Css.Foreign.class AlertMessage
|
||||
[ Css.fontSize (Css.px 20)
|
||||
, Css.fontWeight (Css.int 700)
|
||||
, Css.lineHeight (Css.px 25)
|
||||
, Css.maxWidth (Css.px 600)
|
||||
, Nri.Fonts.baseFont
|
||||
]
|
||||
, Css.class Banner
|
||||
, Css.Foreign.class Banner
|
||||
[ Css.alignItems Css.center
|
||||
, Css.displayFlex
|
||||
, Css.justifyContent Css.center
|
||||
, Css.padding (Css.px 20)
|
||||
, Css.width (Css.pct 100)
|
||||
, Css.children
|
||||
[ Css.Elements.button
|
||||
, Css.Foreign.children
|
||||
[ Css.Foreign.button
|
||||
[ Css.position Css.absolute
|
||||
, Css.right (Css.px 15)
|
||||
]
|
||||
]
|
||||
]
|
||||
, Css.class Error
|
||||
, Css.Foreign.class Error
|
||||
[ Css.backgroundColor Nri.Colors.purpleLight
|
||||
, Css.color Nri.Colors.purpleDark
|
||||
]
|
||||
, Css.class Neutral
|
||||
, Css.Foreign.class Neutral
|
||||
[ Css.backgroundColor Nri.Colors.frost
|
||||
, Css.color Nri.Colors.navy
|
||||
]
|
||||
, Css.class Success
|
||||
, Css.Foreign.class Success
|
||||
[ Css.backgroundColor Nri.Colors.greenLightest
|
||||
, Css.color Nri.Colors.greenDarkest
|
||||
]
|
||||
|
||||
@ -39,7 +39,8 @@ There will generally be a `*Button` and `*Link` version of each button style.
|
||||
|
||||
import Accessibility exposing (..)
|
||||
import Css exposing (..)
|
||||
import Css.Elements
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Html
|
||||
import Html.Attributes exposing (..)
|
||||
import Html.Events exposing (onClick)
|
||||
@ -253,7 +254,7 @@ styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
|
||||
styles =
|
||||
let
|
||||
newSizeStyle size config =
|
||||
Css.class (SizeStyle size)
|
||||
Css.Foreign.class (SizeStyle size)
|
||||
[ fontSize (px config.fontSize)
|
||||
, borderRadius (px 8)
|
||||
, Css.height (px config.height)
|
||||
@ -261,15 +262,15 @@ styles =
|
||||
, padding2 zero (px config.sidePadding)
|
||||
, borderWidth (px 1)
|
||||
, borderBottomWidth (px config.shadowHeight)
|
||||
, Css.descendants
|
||||
[ Css.Elements.img
|
||||
, Css.Foreign.descendants
|
||||
[ Css.Foreign.img
|
||||
[ Css.height (px config.imageHeight)
|
||||
, marginRight (px <| config.imageHeight / 6)
|
||||
, position relative
|
||||
, bottom (px 2)
|
||||
, verticalAlign middle
|
||||
]
|
||||
, Css.Elements.svg
|
||||
, Css.Foreign.svg
|
||||
[ Css.height (px config.imageHeight) |> important
|
||||
, Css.width (px config.imageHeight) |> important
|
||||
, marginRight (px <| config.imageHeight / 6)
|
||||
@ -277,7 +278,7 @@ styles =
|
||||
, bottom (px 2)
|
||||
, verticalAlign middle
|
||||
]
|
||||
, Css.Elements.svg
|
||||
, Css.Foreign.svg
|
||||
[ Css.important <| Css.height (px config.imageHeight)
|
||||
, Css.important <| Css.width auto
|
||||
, maxWidth (px (config.imageHeight * 1.25))
|
||||
@ -289,18 +290,18 @@ styles =
|
||||
]
|
||||
|
||||
-- Borderless buttons get bigger icons
|
||||
, Css.withClass (ColorsStyle BorderlessColors)
|
||||
[ Css.descendants
|
||||
[ Css.Elements.img
|
||||
, Css.Foreign.withClass (ColorsStyle BorderlessColors)
|
||||
[ Css.Foreign.descendants
|
||||
[ Css.Foreign.img
|
||||
[ Css.height (px (config.imageHeight * 1.6))
|
||||
, marginRight (px (config.imageHeight * 1.6 / 6))
|
||||
]
|
||||
, Css.Elements.svg
|
||||
, Css.Foreign.svg
|
||||
[ Css.height (px (config.imageHeight * 1.6)) |> important
|
||||
, Css.width (px (config.imageHeight * 1.6)) |> important
|
||||
, marginRight (px (config.imageHeight * 1.6 / 6))
|
||||
]
|
||||
, Css.Elements.svg
|
||||
, Css.Foreign.svg
|
||||
[ Css.important <| Css.height (px (config.imageHeight * 1.6))
|
||||
, Css.important <| Css.width auto
|
||||
, maxWidth (px (config.imageHeight * 1.25))
|
||||
@ -313,7 +314,7 @@ styles =
|
||||
]
|
||||
|
||||
styleStyle style config =
|
||||
Css.class (ColorsStyle style)
|
||||
Css.Foreign.class (ColorsStyle style)
|
||||
[ color config.text
|
||||
, backgroundColor config.background
|
||||
, borderColor config.border
|
||||
@ -338,7 +339,7 @@ styles =
|
||||
]
|
||||
|
||||
newStyleStyle style config =
|
||||
Css.class (ColorsStyle style)
|
||||
Css.Foreign.class (ColorsStyle style)
|
||||
[ color config.text
|
||||
, backgroundColor config.background
|
||||
, fontWeight (int 700)
|
||||
@ -368,7 +369,7 @@ styles =
|
||||
]
|
||||
in
|
||||
Nri.Ui.Styles.V1.styles "Nri-Ui-Button-"
|
||||
[ Css.class Button
|
||||
[ Css.Foreign.class Button
|
||||
[ cursor pointer
|
||||
, display inlineBlock
|
||||
, -- Specifying the font can and should go away after bootstrap is removed from application.css
|
||||
@ -431,7 +432,7 @@ styles =
|
||||
, border = Nothing
|
||||
, shadow = transparent
|
||||
}
|
||||
, Css.class (ColorsStyle BorderlessColors)
|
||||
, Css.Foreign.class (ColorsStyle BorderlessColors)
|
||||
[ Css.hover
|
||||
[ textDecoration underline
|
||||
, Css.disabled
|
||||
|
||||
@ -33,7 +33,8 @@ import Accessibility exposing (..)
|
||||
import Accessibility.Aria exposing (controls)
|
||||
import Accessibility.Widget as Widget
|
||||
import Css exposing (..)
|
||||
import Css.Elements
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Html
|
||||
import Html.Attributes as Attributes
|
||||
import Html.Events as Events exposing (defaultOptions)
|
||||
@ -369,11 +370,11 @@ type ColorTheme
|
||||
|
||||
mainSnippet : List Snippet
|
||||
mainSnippet =
|
||||
[ Css.class Container
|
||||
[ Css.Foreign.class Container
|
||||
[ display block
|
||||
, height inherit
|
||||
, descendants
|
||||
[ Css.Elements.label
|
||||
[ Css.Foreign.label
|
||||
[ display inlineBlock
|
||||
, verticalAlign middle
|
||||
, minHeight (px 42) -- container height
|
||||
@ -382,15 +383,15 @@ mainSnippet =
|
||||
, property "background-position" "left center"
|
||||
, property "background-repeat" "no-repeat"
|
||||
]
|
||||
, Css.Elements.input [ display none ]
|
||||
, Css.Foreign.input [ display none ]
|
||||
, selector ":disabled + label"
|
||||
[ cursor auto
|
||||
]
|
||||
]
|
||||
]
|
||||
, Css.class Checkbox
|
||||
, Css.Foreign.class Checkbox
|
||||
[ cursor pointer ]
|
||||
, Css.class Label
|
||||
, Css.Foreign.class Label
|
||||
[ cursor pointer
|
||||
, outline none
|
||||
]
|
||||
@ -399,14 +400,14 @@ mainSnippet =
|
||||
|
||||
square : Assets r -> List Snippet
|
||||
square assets =
|
||||
[ Css.class SquareClass
|
||||
[ Css.Foreign.class SquareClass
|
||||
[ children
|
||||
[ Css.Elements.label
|
||||
[ Css.Foreign.label
|
||||
[ paddingLeft (px (29 + 6)) -- checkbox width + padding
|
||||
]
|
||||
, Css.class Unchecked [ backgroundImage assets CheckboxUnchecked ]
|
||||
, Css.class Checked [ backgroundImage assets CheckboxChecked ]
|
||||
, Css.class Indeterminate [ backgroundImage assets CheckboxCheckedPartially ]
|
||||
, Css.Foreign.class Unchecked [ backgroundImage assets CheckboxUnchecked ]
|
||||
, Css.Foreign.class Checked [ backgroundImage assets CheckboxChecked ]
|
||||
, Css.Foreign.class Indeterminate [ backgroundImage assets CheckboxCheckedPartially ]
|
||||
]
|
||||
]
|
||||
]
|
||||
@ -414,18 +415,18 @@ square assets =
|
||||
|
||||
gray : List Snippet
|
||||
gray =
|
||||
[ Css.class GrayClass
|
||||
[ Css.Foreign.class GrayClass
|
||||
[ children
|
||||
[ Css.Elements.label [ color Colors.gray45 ] ]
|
||||
[ Css.Foreign.label [ color Colors.gray45 ] ]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
orange : Assets r -> List Snippet
|
||||
orange assets =
|
||||
[ Css.class OrangeClass
|
||||
[ Css.Foreign.class OrangeClass
|
||||
[ children
|
||||
[ Css.Elements.label
|
||||
[ Css.Foreign.label
|
||||
[ color Colors.ochre
|
||||
, displayFlex
|
||||
, alignItems center
|
||||
@ -444,9 +445,9 @@ orange assets =
|
||||
|
||||
round : Assets r -> List Snippet
|
||||
round assets =
|
||||
[ Css.class RoundClass
|
||||
[ Css.Foreign.class RoundClass
|
||||
[ children
|
||||
[ Css.Elements.label
|
||||
[ Css.Foreign.label
|
||||
[ displayFlex
|
||||
, alignItems center
|
||||
, property "cursor" "pointer"
|
||||
@ -474,7 +475,7 @@ round assets =
|
||||
]
|
||||
]
|
||||
]
|
||||
, Css.class WithPulsing
|
||||
, Css.Foreign.class WithPulsing
|
||||
[ property "-webkit-animation" "pulsate 1s infinite"
|
||||
, property "-moz-animation" "pulsate 1s infinite"
|
||||
, property "animation" "pulsate 1s infinite"
|
||||
@ -484,9 +485,9 @@ round assets =
|
||||
|
||||
locked : Assets r -> List Snippet
|
||||
locked assets =
|
||||
[ Css.class LockedClass
|
||||
[ Css.Foreign.class LockedClass
|
||||
[ descendants
|
||||
[ Css.Elements.label
|
||||
[ Css.Foreign.label
|
||||
[ paddingLeft (px (29 + 6)) -- checkbox width + padding
|
||||
, backgroundImage assets PremiumLocked
|
||||
, property "cursor" "auto"
|
||||
@ -498,9 +499,9 @@ locked assets =
|
||||
|
||||
lockOnInside : Assets r -> List Snippet
|
||||
lockOnInside assets =
|
||||
[ Css.class LockOnInsideClass
|
||||
[ Css.Foreign.class LockOnInsideClass
|
||||
[ descendants
|
||||
[ Css.Elements.label
|
||||
[ Css.Foreign.label
|
||||
[ paddingLeft (px 35)
|
||||
, backgroundImage assets CheckboxLockOnInside
|
||||
, backgroundSize (px 24)
|
||||
@ -514,9 +515,9 @@ lockOnInside assets =
|
||||
|
||||
unlockable : Assets r -> List Snippet
|
||||
unlockable assets =
|
||||
[ Css.class UnlockableClass
|
||||
[ Css.Foreign.class UnlockableClass
|
||||
[ descendants
|
||||
[ Css.Elements.label
|
||||
[ Css.Foreign.label
|
||||
[ paddingLeft (px (29 + 6)) -- checkbox width + padding
|
||||
, backgroundImage assets PremiumKey
|
||||
, property "cursor" "auto"
|
||||
@ -528,9 +529,9 @@ unlockable assets =
|
||||
|
||||
premiumStyles : Assets r -> List Snippet
|
||||
premiumStyles assets =
|
||||
[ Css.class PremiumClass
|
||||
[ Css.Foreign.class PremiumClass
|
||||
[ children
|
||||
[ Css.Elements.label
|
||||
[ Css.Foreign.label
|
||||
[ displayFlex
|
||||
, alignItems center
|
||||
]
|
||||
@ -551,14 +552,14 @@ premiumStyles assets =
|
||||
|
||||
opacified : List Snippet
|
||||
opacified =
|
||||
[ Css.class Opacified
|
||||
[ Css.Foreign.class Opacified
|
||||
[ descendants [ everything [ opacity (num 0.4) ] ] ]
|
||||
]
|
||||
|
||||
|
||||
hiddenLabelText : List Snippet
|
||||
hiddenLabelText =
|
||||
[ Css.class LabelText
|
||||
[ Css.Foreign.class LabelText
|
||||
[ Accessibility.invisibleText
|
||||
]
|
||||
]
|
||||
|
||||
@ -7,6 +7,8 @@ module Nri.Ui.Divider.V1 exposing (styles, view)
|
||||
-}
|
||||
|
||||
import Css exposing (..)
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Html exposing (..)
|
||||
import Nri.Colors as Colors
|
||||
import Nri.Ui.Styles.V1
|
||||
@ -39,24 +41,24 @@ type CssClasses
|
||||
styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
|
||||
styles =
|
||||
Nri.Ui.Styles.V1.styles "Nri-Ui-Divider-"
|
||||
[ Css.class Container
|
||||
[ Css.Foreign.class Container
|
||||
[ Css.width (pct 100)
|
||||
, Css.displayFlex
|
||||
, Css.alignItems Css.center
|
||||
]
|
||||
, Css.class LeftLine
|
||||
, Css.Foreign.class LeftLine
|
||||
[ Css.width (px 10)
|
||||
, Css.height (px 1)
|
||||
, backgroundColor Colors.gray75
|
||||
, marginTop (px 2)
|
||||
]
|
||||
, Css.class RightLine
|
||||
, Css.Foreign.class RightLine
|
||||
[ Css.flexGrow (Css.int 1)
|
||||
, backgroundColor Colors.gray75
|
||||
, Css.height (px 1)
|
||||
, marginTop (px 2)
|
||||
]
|
||||
, Css.class Title
|
||||
, Css.Foreign.class Title
|
||||
[ margin2 zero (px 5)
|
||||
, fontSize (px 12)
|
||||
, color Colors.gray45
|
||||
|
||||
@ -7,6 +7,8 @@ module Nri.Ui.Effects.V1 exposing (selectionShadow)
|
||||
-}
|
||||
|
||||
import Css exposing (..)
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Nri.Colors
|
||||
|
||||
|
||||
|
||||
@ -16,7 +16,8 @@ module Nri.Ui.Modal.V1
|
||||
-}
|
||||
|
||||
import Css
|
||||
import Css.Elements exposing (body)
|
||||
import Css.Foreign exposing (Snippet, body, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Html exposing (..)
|
||||
import Html.Attributes exposing (..)
|
||||
import Html.CssHelpers exposing (..)
|
||||
@ -142,12 +143,12 @@ open (and this node is present on the page).
|
||||
-}
|
||||
styleNode : Html msg
|
||||
styleNode =
|
||||
[ Css.stylesheet
|
||||
[ Css.Elements.body
|
||||
[ stylesheet
|
||||
[ Css.Foreign.body
|
||||
[ Css.overflow Css.hidden ]
|
||||
]
|
||||
]
|
||||
|> Css.compile
|
||||
|> compile
|
||||
|> .css
|
||||
|> Html.CssHelpers.style
|
||||
|
||||
@ -170,7 +171,7 @@ type CssClasses
|
||||
styles : Nri.Ui.Styles.V1.Styles Never CssClasses b
|
||||
styles =
|
||||
Nri.Ui.Styles.V1.styles "Nri-Ui-BannerAlert-"
|
||||
[ Css.class BackdropContainer
|
||||
[ Css.Foreign.class BackdropContainer
|
||||
[ Css.height (Css.vh 100)
|
||||
, Css.left Css.zero
|
||||
, Css.overflow Css.hidden
|
||||
@ -179,26 +180,26 @@ styles =
|
||||
, Css.width (Css.pct 100)
|
||||
, Css.zIndex (Css.int 3)
|
||||
]
|
||||
, Css.class BackdropContainerWarning
|
||||
, Css.Foreign.class BackdropContainerWarning
|
||||
[ Css.backgroundColor (Nri.Colors.Extra.withAlpha 0.9 Nri.Colors.gray20)
|
||||
]
|
||||
, Css.class BackdropContainerInfo
|
||||
, Css.Foreign.class BackdropContainerInfo
|
||||
[ Css.backgroundColor (Nri.Colors.Extra.withAlpha 0.9 Nri.Colors.navy)
|
||||
]
|
||||
, Css.class ClickCatcher
|
||||
, Css.Foreign.class ClickCatcher
|
||||
[ Css.bottom Css.zero
|
||||
, Css.left Css.zero
|
||||
, Css.position Css.absolute
|
||||
, Css.right Css.zero
|
||||
, Css.top Css.zero
|
||||
]
|
||||
, Css.class Content
|
||||
, Css.Foreign.class Content
|
||||
[ Css.flexShrink (Css.int 4)
|
||||
, Css.overflowY Css.auto
|
||||
, Css.padding2 Css.zero (Css.px 45)
|
||||
, Css.width (Css.pct 100)
|
||||
]
|
||||
, Css.class Footer
|
||||
, Css.Foreign.class Footer
|
||||
[ Css.alignItems Css.center
|
||||
, Css.displayFlex
|
||||
, Css.flexDirection Css.column
|
||||
@ -207,24 +208,24 @@ styles =
|
||||
, Css.margin4 (Css.px 40) Css.zero Css.zero Css.zero
|
||||
, Css.width (Css.pct 100)
|
||||
]
|
||||
, Css.class FooterItem
|
||||
, Css.Foreign.class FooterItem
|
||||
[ Css.margin4 (Css.px 10) Css.zero Css.zero Css.zero
|
||||
, Css.firstChild
|
||||
[ Css.margin Css.zero
|
||||
]
|
||||
]
|
||||
, Css.class Heading
|
||||
, Css.Foreign.class Heading
|
||||
[ Css.fontWeight (Css.int 700)
|
||||
, Css.lineHeight (Css.px 27)
|
||||
, Css.margin4 Css.zero Css.zero (Css.px 40) Css.zero
|
||||
]
|
||||
, Css.class HeadingInfo
|
||||
, Css.Foreign.class HeadingInfo
|
||||
[ Nri.Stylers.makeFont (Css.px 20) Nri.Colors.navy
|
||||
]
|
||||
, Css.class HeadingWarning
|
||||
, Css.Foreign.class HeadingWarning
|
||||
[ Nri.Stylers.makeFont (Css.px 20) Nri.Colors.red
|
||||
]
|
||||
, Css.class ModalContainer
|
||||
, Css.Foreign.class ModalContainer
|
||||
[ Css.alignItems Css.center
|
||||
, Css.displayFlex
|
||||
, Css.flexDirection Css.column
|
||||
|
||||
@ -12,7 +12,9 @@ module Nri.Ui.Outline.V1 exposing (NodeConfig, NodeLayout, config, html, node, s
|
||||
|
||||
-}
|
||||
|
||||
import Css exposing (Stylesheet)
|
||||
import Css
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Html exposing (Attribute, Html)
|
||||
import Nri.Colors
|
||||
import Nri.Stylers
|
||||
@ -153,7 +155,7 @@ labelHeight =
|
||||
styles : Styles a Style b
|
||||
styles =
|
||||
Nri.Ui.Styles.V1.styles "Outline" <|
|
||||
[ Css.class Segment
|
||||
[ Css.Foreign.class Segment
|
||||
[ Css.position Css.relative
|
||||
, Css.zIndex (Css.int 0)
|
||||
|
||||
@ -161,15 +163,15 @@ styles =
|
||||
-- top level nodes.
|
||||
, Css.overflow Css.auto
|
||||
]
|
||||
, Css.class Node
|
||||
, Css.Foreign.class Node
|
||||
-- The node's relative positioning allows the connecting line to
|
||||
-- point upward relative from the node's bounding box.
|
||||
[ Css.position Css.relative
|
||||
, Css.display Css.block
|
||||
|
||||
-- This selects all nodes on a level but the first.
|
||||
, Css.generalSiblings
|
||||
[ Css.class Node
|
||||
, Css.Foreign.generalSiblings
|
||||
[ Css.Foreign.class Node
|
||||
-- Add some spacing between nodes of the same level.
|
||||
[ Css.marginTop (Css.px 20)
|
||||
, Css.before
|
||||
@ -181,9 +183,9 @@ styles =
|
||||
]
|
||||
|
||||
-- Child nodes have a connecting line and are indented.
|
||||
, Css.descendants nestedNodeStyles
|
||||
, Css.Foreign.descendants nestedNodeStyles
|
||||
]
|
||||
, Css.class InnerNode
|
||||
, Css.Foreign.class InnerNode
|
||||
[ Css.overflow Css.auto
|
||||
|
||||
-- The position and zIndex create a new stacking context. Connecting
|
||||
@ -193,7 +195,7 @@ styles =
|
||||
|
||||
-- Recursively assign color styles to the different nested levels of
|
||||
-- the outline structure.
|
||||
, Css.descendants
|
||||
, Css.Foreign.descendants
|
||||
(colorStyles
|
||||
[ Nri.Ui.Palette.V1.cornflower
|
||||
, Nri.Ui.Palette.V1.aqua
|
||||
@ -202,12 +204,12 @@ styles =
|
||||
]
|
||||
)
|
||||
]
|
||||
, Css.class GhostedNode
|
||||
, Css.Foreign.class GhostedNode
|
||||
[ Css.opacity (Css.num 0.5)
|
||||
, Css.zIndex (Css.int -1)
|
||||
, Css.position Css.relative
|
||||
]
|
||||
, Css.class Label
|
||||
, Css.Foreign.class Label
|
||||
[ Css.border2 (Css.px 1) Css.solid
|
||||
, Css.padding2 Css.zero (Css.px 15)
|
||||
, Css.fontSize (Css.px 15)
|
||||
@ -222,7 +224,7 @@ styles =
|
||||
, Nri.Stylers.makeFont (Css.px 15) Nri.Colors.gray20
|
||||
, Css.fontWeight Css.bold
|
||||
]
|
||||
, Css.class Contents
|
||||
, Css.Foreign.class Contents
|
||||
[ Css.borderRadius (Css.px 8)
|
||||
, Css.marginTop (Css.px (labelHeight / 2))
|
||||
, Css.marginLeft (Css.px (labelHeight / 2))
|
||||
@ -234,9 +236,9 @@ styles =
|
||||
, Css.marginRight (Css.px 5)
|
||||
, Css.marginBottom (Css.px 5)
|
||||
]
|
||||
, Css.class SelectedNode
|
||||
[ Css.children
|
||||
[ Css.class Contents
|
||||
, Css.Foreign.class SelectedNode
|
||||
[ Css.Foreign.children
|
||||
[ Css.Foreign.class Contents
|
||||
[ Css.batch Nri.Ui.Effects.V1.selectionShadow
|
||||
]
|
||||
]
|
||||
@ -245,9 +247,9 @@ styles =
|
||||
++ curvedConnectingLineStyles
|
||||
|
||||
|
||||
nestedNodeStyles : List Css.Snippet
|
||||
nestedNodeStyles : List Snippet
|
||||
nestedNodeStyles =
|
||||
[ Css.class Node
|
||||
[ Css.Foreign.class Node
|
||||
[ Css.marginTop (Css.px 20)
|
||||
, Css.before
|
||||
-- Draw the connect line. It is like an antenna pointing
|
||||
@ -257,14 +259,14 @@ nestedNodeStyles =
|
||||
, Css.borderBottom2 (Css.px 1) Css.solid
|
||||
, Css.batch lineStyles
|
||||
]
|
||||
, Css.children
|
||||
, Css.Foreign.children
|
||||
-- Indent this node relative to the parent.
|
||||
[ Css.class InnerNode
|
||||
[ Css.Foreign.class InnerNode
|
||||
[ Css.marginLeft (Css.px 50)
|
||||
]
|
||||
]
|
||||
]
|
||||
, Css.class CustomHtml
|
||||
, Css.Foreign.class CustomHtml
|
||||
[ Css.marginLeft (Css.px 50)
|
||||
]
|
||||
]
|
||||
@ -273,7 +275,7 @@ nestedNodeStyles =
|
||||
{-| The last node is sometimes connected by a curving line to its parent.
|
||||
Whether this curve should appear or not depends on the level of the node.
|
||||
-}
|
||||
curvedConnectingLineStyles : List Css.Snippet
|
||||
curvedConnectingLineStyles : List Snippet
|
||||
curvedConnectingLineStyles =
|
||||
-- 1. Root level nodes are connected with one another using straight lines,
|
||||
-- so they are never curved.
|
||||
@ -298,10 +300,10 @@ curvedConnectingLineStyles =
|
||||
-- │
|
||||
-- ╰─ Child Node 3
|
||||
--
|
||||
[ Css.class Node
|
||||
[ Css.Foreign.class Node
|
||||
[ Css.lastOfType
|
||||
[ Css.descendants
|
||||
[ Css.class Node
|
||||
[ Css.Foreign.descendants
|
||||
[ Css.Foreign.class Node
|
||||
[ Css.lastOfType
|
||||
[ Css.before
|
||||
[ Css.borderRadius (Css.px 8)
|
||||
@ -327,11 +329,11 @@ curvedConnectingLineStyles =
|
||||
-- │
|
||||
-- ╰─ Child Node 2
|
||||
--
|
||||
, Css.class Node
|
||||
[ Css.descendants
|
||||
[ Css.class Node
|
||||
[ Css.descendants
|
||||
[ Css.class Node
|
||||
, Css.Foreign.class Node
|
||||
[ Css.Foreign.descendants
|
||||
[ Css.Foreign.class Node
|
||||
[ Css.Foreign.descendants
|
||||
[ Css.Foreign.class Node
|
||||
[ Css.lastOfType
|
||||
[ Css.before
|
||||
[ Css.borderRadius (Css.px 8)
|
||||
@ -345,20 +347,20 @@ curvedConnectingLineStyles =
|
||||
]
|
||||
|
||||
|
||||
colorStyles : List Palette -> List Css.Snippet
|
||||
colorStyles : List Palette -> List Snippet
|
||||
colorStyles palettes =
|
||||
case palettes of
|
||||
[] ->
|
||||
[]
|
||||
|
||||
palette :: rest ->
|
||||
[ Css.class InnerNode
|
||||
[ Css.descendants (colorStyles rest)
|
||||
[ Css.Foreign.class InnerNode
|
||||
[ Css.Foreign.descendants (colorStyles rest)
|
||||
]
|
||||
, Css.class Contents
|
||||
, Css.Foreign.class Contents
|
||||
[ Css.backgroundColor palette.background
|
||||
]
|
||||
, Css.class Label
|
||||
, Css.Foreign.class Label
|
||||
[ Css.color palette.primary
|
||||
, Css.borderColor palette.border
|
||||
]
|
||||
|
||||
@ -8,6 +8,8 @@ module Nri.Ui.Palette.V1 exposing (..)
|
||||
-}
|
||||
|
||||
import Css exposing (..)
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Nri.Colors as Colors
|
||||
|
||||
|
||||
|
||||
@ -18,7 +18,9 @@ module Nri.Ui.Styles.V1 exposing (Keyframe, Styles, StylesWithAssets, keyframes,
|
||||
-}
|
||||
|
||||
import Css
|
||||
import Css.Namespace
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import DEPRECATED.Css.Namespace
|
||||
import Html exposing (Attribute, Html)
|
||||
import Html.CssHelpers
|
||||
|
||||
@ -37,7 +39,7 @@ type alias Styles id class msg =
|
||||
image somewhere.
|
||||
-}
|
||||
type alias StylesWithAssets id class msg assets =
|
||||
{ css : assets -> List Css.Stylesheet
|
||||
{ css : assets -> List Stylesheet
|
||||
, id : id -> Attribute msg
|
||||
, class : List class -> Attribute msg
|
||||
, classList : List ( class, Bool ) -> Attribute msg
|
||||
@ -51,41 +53,41 @@ This will help you make sure you don't mismatch the namespace you're using.
|
||||
|
||||
{ css, class } =
|
||||
Nri.Ui.Styles.styles "Nri-Ui-MyWidget-"
|
||||
[ Css.class Container
|
||||
[ Css.Foreign.class Container
|
||||
[ backgroundColor Nri.Colors.ochre ]
|
||||
]
|
||||
|
||||
-}
|
||||
styles :
|
||||
String
|
||||
-> List Css.Snippet
|
||||
-> List Snippet
|
||||
-> Styles id class msg
|
||||
styles namespace snippets =
|
||||
stylesWithExtraStylesheets namespace [] snippets
|
||||
|
||||
|
||||
{-| Use this instead of [`styles`](#styles) if you need to
|
||||
include Css.Stylesheets from external packages,
|
||||
include Stylesheets from external packages,
|
||||
or if you need to add styles without a namespace.
|
||||
Remember, all stylesheets given here will be included
|
||||
on all pages of the site.
|
||||
-}
|
||||
stylesWithExtraStylesheets :
|
||||
String
|
||||
-> List Css.Stylesheet
|
||||
-> List Css.Snippet
|
||||
-> List Stylesheet
|
||||
-> List Snippet
|
||||
-> Styles id class msg
|
||||
stylesWithExtraStylesheets namespace extras snippets =
|
||||
let
|
||||
{ id, class, classList } =
|
||||
Html.CssHelpers.withNamespace namespace
|
||||
|
||||
stylesheet =
|
||||
sheet =
|
||||
snippets
|
||||
|> Css.Namespace.namespace namespace
|
||||
|> Css.stylesheet
|
||||
|> DEPRECATED.Css.Namespace.namespace namespace
|
||||
|> stylesheet
|
||||
in
|
||||
{ css = \assets -> stylesheet :: extras
|
||||
{ css = \assets -> sheet :: extras
|
||||
, id = id
|
||||
, class = class
|
||||
, classList = classList
|
||||
@ -98,19 +100,19 @@ stylesWithExtraStylesheets namespace extras snippets =
|
||||
-}
|
||||
stylesWithAssets :
|
||||
String
|
||||
-> (assets -> List Css.Snippet)
|
||||
-> (assets -> List Snippet)
|
||||
-> StylesWithAssets id class msg assets
|
||||
stylesWithAssets namespace snippets =
|
||||
let
|
||||
{ id, class, classList } =
|
||||
Html.CssHelpers.withNamespace namespace
|
||||
|
||||
stylesheet assets =
|
||||
sheet assets =
|
||||
snippets assets
|
||||
|> Css.Namespace.namespace namespace
|
||||
|> Css.stylesheet
|
||||
|> DEPRECATED.Css.Namespace.namespace namespace
|
||||
|> stylesheet
|
||||
in
|
||||
{ css = \assets -> [ stylesheet assets ]
|
||||
{ css = \assets -> [ sheet assets ]
|
||||
, id = id
|
||||
, class = class
|
||||
, classList = classList
|
||||
|
||||
@ -36,6 +36,8 @@ import Accessibility.Key
|
||||
import Accessibility.Role
|
||||
import Accessibility.Widget
|
||||
import Css exposing (Style)
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Html exposing (Attribute, Html)
|
||||
import Html.Attributes
|
||||
import Html.Events
|
||||
@ -265,7 +267,7 @@ type CssClasses
|
||||
styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
|
||||
styles =
|
||||
Nri.Ui.Styles.V1.styles "Nri-Ui-Tabs-"
|
||||
[ Css.class Container
|
||||
[ Css.Foreign.class Container
|
||||
[ Css.displayFlex
|
||||
, Css.alignItems Css.flexEnd
|
||||
, Css.borderBottom (Css.px 1)
|
||||
@ -273,7 +275,7 @@ styles =
|
||||
, Css.borderBottomColor Nri.Colors.navy
|
||||
, Nri.Fonts.baseFont
|
||||
]
|
||||
, Css.class Title
|
||||
, Css.Foreign.class Title
|
||||
[ Css.flexGrow (Css.int 2)
|
||||
, Css.fontSize (Css.px 30)
|
||||
, Css.fontWeight Css.bold
|
||||
@ -283,19 +285,19 @@ styles =
|
||||
, Css.color Nri.Colors.navy
|
||||
, Css.width (Css.px 430)
|
||||
]
|
||||
, Css.class (Tabs Left)
|
||||
, Css.Foreign.class (Tabs Left)
|
||||
[ stylesTabs
|
||||
, Css.justifyContent Css.flexStart
|
||||
]
|
||||
, Css.class (Tabs Center)
|
||||
, Css.Foreign.class (Tabs Center)
|
||||
[ stylesTabs
|
||||
, Css.justifyContent Css.center
|
||||
]
|
||||
, Css.class (Tabs Right)
|
||||
, Css.Foreign.class (Tabs Right)
|
||||
[ stylesTabs
|
||||
, Css.justifyContent Css.flexEnd
|
||||
]
|
||||
, Css.class (TabContainer False) <|
|
||||
, Css.Foreign.class (TabContainer False) <|
|
||||
[ stylesTab
|
||||
, Css.backgroundColor Nri.Colors.frost
|
||||
, Css.backgroundImage <|
|
||||
@ -304,14 +306,14 @@ styles =
|
||||
(Css.stop2 (Nri.Colors.Extra.withAlpha 0 Nri.Colors.azure) (Css.pct 25))
|
||||
[ Css.stop2 (Nri.Colors.Extra.withAlpha 0 Nri.Colors.azure) (Css.pct 100) ]
|
||||
]
|
||||
, Css.class (TabContainer True) <|
|
||||
, Css.Foreign.class (TabContainer True) <|
|
||||
[ stylesTab
|
||||
, Css.backgroundColor Nri.Colors.white
|
||||
, Css.borderBottom (Css.px 1)
|
||||
, Css.borderBottomStyle Css.solid
|
||||
, Css.borderBottomColor Nri.Colors.white
|
||||
]
|
||||
, Css.class TabContainerLink
|
||||
, Css.Foreign.class TabContainerLink
|
||||
[ Css.color Nri.Colors.navy
|
||||
, Css.hover [ Css.textDecoration Css.none ]
|
||||
, Css.focus [ Css.textDecoration Css.none ]
|
||||
@ -320,7 +322,7 @@ styles =
|
||||
, Css.position Css.relative
|
||||
, Css.textDecoration Css.none
|
||||
]
|
||||
, Css.class TabClickableLink
|
||||
, Css.Foreign.class TabClickableLink
|
||||
[ Css.color Nri.Colors.navy
|
||||
, Css.display Css.inlineBlock
|
||||
, Css.padding4 (Css.px 14) (Css.px 20) (Css.px 12) (Css.px 20)
|
||||
|
||||
@ -41,7 +41,9 @@ Modifying strings to display nicely:
|
||||
-}
|
||||
|
||||
import Css exposing (..)
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import Css.Helpers exposing (identifierToString)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Html exposing (..)
|
||||
import Nri.Colors exposing (..)
|
||||
import Nri.Stylers exposing (makeFont)
|
||||
@ -169,55 +171,55 @@ type CssClasses
|
||||
styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
|
||||
styles =
|
||||
Nri.Ui.Styles.V1.styles namespace
|
||||
[ Css.class Heading
|
||||
[ Css.Foreign.class Heading
|
||||
[ makeFont (px 30) navy
|
||||
, lineHeight (px 40.5)
|
||||
, fontWeight (int 700)
|
||||
, margin zero
|
||||
]
|
||||
, Css.class Tagline
|
||||
, Css.Foreign.class Tagline
|
||||
[ makeFont (px 20) gray45
|
||||
, lineHeight (px 27)
|
||||
, fontWeight (int 400)
|
||||
, margin4 (px 5) (px 0) (px 0) (px 0)
|
||||
]
|
||||
, Css.class SubHeading
|
||||
, Css.Foreign.class SubHeading
|
||||
[ makeFont (px 20) navy
|
||||
, lineHeight (px 27)
|
||||
, fontWeight (int 700)
|
||||
, margin4 (px 20) (px 0) (px 10) (px 0)
|
||||
]
|
||||
, Css.class SmallHeading
|
||||
, Css.Foreign.class SmallHeading
|
||||
[ makeFont (px 16) gray20
|
||||
, lineHeight (px 23)
|
||||
, fontWeight (int 700)
|
||||
, margin zero
|
||||
]
|
||||
, Css.class MediumBody
|
||||
, Css.Foreign.class MediumBody
|
||||
[ makeFont (px 18) gray20
|
||||
, lineHeight (px 27)
|
||||
, fontWeight (int 400)
|
||||
, margin4 (px 10) (px 0) (px 0) (px 0)
|
||||
]
|
||||
, Css.class SmallBody
|
||||
, Css.Foreign.class SmallBody
|
||||
[ makeFont (px 15) gray20
|
||||
, lineHeight (px 23)
|
||||
, fontWeight (int 400)
|
||||
, margin4 (px 7) (px 0) (px 0) (px 0)
|
||||
]
|
||||
, Css.class SmallBodyGray
|
||||
, Css.Foreign.class SmallBodyGray
|
||||
[ makeFont (px 15) gray45
|
||||
, lineHeight (px 23)
|
||||
, fontWeight (int 400)
|
||||
, margin4 (px 7) (px 0) (px 0) (px 0)
|
||||
]
|
||||
, Css.class Caption
|
||||
, Css.Foreign.class Caption
|
||||
[ makeFont (px 13) gray45
|
||||
, lineHeight (px 18)
|
||||
, fontWeight (int 400)
|
||||
, margin4 (px 5) (px 0) (px 0) (px 0)
|
||||
]
|
||||
, Css.class Text
|
||||
, Css.Foreign.class Text
|
||||
[ padding zero
|
||||
, textAlign left
|
||||
, firstChild
|
||||
|
||||
@ -10,6 +10,8 @@ module Nri.Ui.TextArea.V1 exposing (styles, view)
|
||||
-}
|
||||
|
||||
import Css exposing (..)
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Html exposing (..)
|
||||
import Html.Attributes exposing (..)
|
||||
import Html.Events exposing (onInput)
|
||||
@ -75,14 +77,14 @@ type CssClass
|
||||
styles : Nri.Ui.Styles.V1.Styles Never CssClass msg
|
||||
styles =
|
||||
Nri.Ui.Styles.V1.styles "Nri-Ui-Textarea-"
|
||||
[ Css.class Container
|
||||
[ Css.Foreign.class Container
|
||||
[ position relative
|
||||
, paddingTop (px 7)
|
||||
]
|
||||
, Css.class InvisibleLabel
|
||||
, Css.Foreign.class InvisibleLabel
|
||||
[ Nri.Accessibility.invisibleText
|
||||
]
|
||||
, Css.class Label
|
||||
, Css.Foreign.class Label
|
||||
[ backgroundColor Nri.Colors.white
|
||||
, left (px 10)
|
||||
, top (px 0)
|
||||
@ -92,7 +94,7 @@ styles =
|
||||
, border3 (px 1) solid Nri.Colors.gray75
|
||||
, borderRadius (px 3)
|
||||
]
|
||||
, Css.class TextArea
|
||||
, Css.Foreign.class TextArea
|
||||
[ boxShadow5 inset zero (px 1) (px 1) (withAlpha 0.2 gray20)
|
||||
, position relative
|
||||
, resize vertical
|
||||
@ -107,7 +109,7 @@ styles =
|
||||
[ borderColor Nri.Colors.turquoise -- TODO: swap for new styleguide color
|
||||
, outline none
|
||||
]
|
||||
, Css.withClass IsInError
|
||||
, Css.Foreign.withClass IsInError
|
||||
[ borderColor purple
|
||||
]
|
||||
]
|
||||
|
||||
@ -26,6 +26,8 @@ module Nri.Ui.TextInput.V1
|
||||
-}
|
||||
|
||||
import Css exposing (..)
|
||||
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
|
||||
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
|
||||
import Html exposing (..)
|
||||
import Html.Attributes exposing (..)
|
||||
import Html.Events exposing (onInput)
|
||||
@ -157,14 +159,14 @@ styles =
|
||||
]
|
||||
in
|
||||
Nri.Ui.Styles.V1.styles "Nri-Ui-TextInput-"
|
||||
[ Css.selector "input[type=text]"
|
||||
[ Css.withClass Input inputStyle ]
|
||||
, Css.selector "input[type=number]"
|
||||
[ Css.withClass Input inputStyle ]
|
||||
, Css.class InvisibleLabel
|
||||
[ Css.Foreign.selector "input[type=text]"
|
||||
[ Css.Foreign.withClass Input inputStyle ]
|
||||
, Css.Foreign.selector "input[type=number]"
|
||||
[ Css.Foreign.withClass Input inputStyle ]
|
||||
, Css.Foreign.class InvisibleLabel
|
||||
[ Nri.Accessibility.invisibleText
|
||||
]
|
||||
, Css.class OverlappingLabel
|
||||
, Css.Foreign.class OverlappingLabel
|
||||
[ Css.backgroundColor Nri.Colors.white
|
||||
, Css.left (Css.px 10)
|
||||
, Css.top (Css.px 0)
|
||||
@ -173,18 +175,18 @@ styles =
|
||||
, Css.position Css.absolute
|
||||
, Css.fontWeight (int 600)
|
||||
]
|
||||
, Css.class OverlappingLabelInput
|
||||
, Css.Foreign.class OverlappingLabelInput
|
||||
[ Css.position Css.relative
|
||||
]
|
||||
, Css.class IsInError
|
||||
[ Css.children
|
||||
[ Css.class Input
|
||||
[ Css.withClass IsInErrorInput
|
||||
, Css.Foreign.class IsInError
|
||||
[ Css.Foreign.children
|
||||
[ Css.Foreign.class Input
|
||||
[ Css.Foreign.withClass IsInErrorInput
|
||||
[ borderColor purple
|
||||
, focus [ borderColor purple ]
|
||||
]
|
||||
]
|
||||
, Css.class OverlappingLabel
|
||||
, Css.Foreign.class OverlappingLabel
|
||||
[ color purple
|
||||
]
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user