mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-29 02:42:23 +03:00
Pull out the styles from the stylesheet
This commit is contained in:
Tessa Kelly
parent
2a1eeb5522
commit
b50f566443
@ -37,6 +37,7 @@ import Css.Foreign exposing (Snippet, children, descendants, everything, selecto
|
|||||||
import Html as RootHtml
|
import Html as RootHtml
|
||||||
import Html.Attributes as RootAttributes
|
import Html.Attributes as RootAttributes
|
||||||
import Html.Events as Events exposing (defaultOptions)
|
import Html.Events as Events exposing (defaultOptions)
|
||||||
|
import Html.Styled.Attributes exposing (css)
|
||||||
import Json.Decode
|
import Json.Decode
|
||||||
import Json.Encode
|
import Json.Encode
|
||||||
import Nri.Ui.AssetPath exposing (Asset(..))
|
import Nri.Ui.AssetPath exposing (Asset(..))
|
||||||
@ -360,194 +361,231 @@ type ColorTheme
|
|||||||
| Orange
|
| Orange
|
||||||
|
|
||||||
|
|
||||||
mainSnippet : List Snippet
|
containerStyles =
|
||||||
mainSnippet =
|
[ display block
|
||||||
[ Css.Foreign.class Container
|
, height inherit
|
||||||
[ display block
|
, descendants
|
||||||
, height inherit
|
[ Css.Foreign.label
|
||||||
, descendants
|
[ display inlineBlock
|
||||||
[ Css.Foreign.label
|
, verticalAlign middle
|
||||||
[ display inlineBlock
|
, minHeight (px 42) -- container height
|
||||||
, verticalAlign middle
|
, padding2 (px 13) zero
|
||||||
, minHeight (px 42) -- container height
|
, fontSize (px 16)
|
||||||
, padding2 (px 13) zero
|
, Fonts.baseFont
|
||||||
, fontSize (px 16)
|
, color Colors.gray20
|
||||||
, Fonts.baseFont
|
, property "background-position" "left center"
|
||||||
, color Colors.gray20
|
, property "background-repeat" "no-repeat"
|
||||||
, property "background-position" "left center"
|
]
|
||||||
, property "background-repeat" "no-repeat"
|
, Css.Foreign.input [ display none ]
|
||||||
]
|
, selector ":disabled + label"
|
||||||
, Css.Foreign.input [ display none ]
|
[ cursor auto
|
||||||
, selector ":disabled + label"
|
|
||||||
[ cursor auto
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
, Css.Foreign.class Checkbox
|
]
|
||||||
[ cursor pointer ]
|
|
||||||
, Css.Foreign.class Label
|
|
||||||
[ cursor pointer
|
checkboxStyles =
|
||||||
, outline none
|
[ cursor pointer ]
|
||||||
|
|
||||||
|
|
||||||
|
labelStyles =
|
||||||
|
[ cursor pointer
|
||||||
|
, outline none
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
squareStyles assets =
|
||||||
|
[ children
|
||||||
|
[ Css.Foreign.label
|
||||||
|
[ paddingLeft (px (29 + 6)) -- checkbox width + padding
|
||||||
|
]
|
||||||
|
, Css.Foreign.class Unchecked [ backgroundImage assets CheckboxUnchecked ]
|
||||||
|
, Css.Foreign.class Checked [ backgroundImage assets CheckboxChecked ]
|
||||||
|
, Css.Foreign.class Indeterminate [ backgroundImage assets CheckboxCheckedPartially ]
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
grayStyles =
|
||||||
|
[ children [ Css.Foreign.label [ color Colors.gray45 ] ] ]
|
||||||
|
|
||||||
|
|
||||||
|
orangeStyles assets =
|
||||||
|
[ children
|
||||||
|
[ Css.Foreign.label
|
||||||
|
[ color Colors.ochre
|
||||||
|
, displayFlex
|
||||||
|
, alignItems center
|
||||||
|
]
|
||||||
|
, selector "label::after"
|
||||||
|
[ property "content" "''"
|
||||||
|
, width (px 26)
|
||||||
|
, height (px 24)
|
||||||
|
, marginLeft (px 8)
|
||||||
|
, backgroundImage assets PremiumUnlocked
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
roundStyles assets =
|
||||||
|
[ children
|
||||||
|
[ Css.Foreign.label
|
||||||
|
[ displayFlex
|
||||||
|
, alignItems center
|
||||||
|
, property "cursor" "pointer"
|
||||||
|
]
|
||||||
|
, selector "label::before"
|
||||||
|
[ property "content" "''"
|
||||||
|
, width (px 24)
|
||||||
|
, height (px 24)
|
||||||
|
, marginRight (px 8)
|
||||||
|
, borderRadius (pct 100)
|
||||||
|
]
|
||||||
|
, selector ".checkbox-Unchecked::before"
|
||||||
|
[ border3 (px 2) solid Colors.blue
|
||||||
|
, backgroundColor Colors.white
|
||||||
|
]
|
||||||
|
, selector ".checkbox-Checked::before"
|
||||||
|
[ backgroundColor Colors.green
|
||||||
|
, border3 (px 2) solid Colors.green
|
||||||
|
, backgroundImage assets CheckWhite
|
||||||
|
, property "background-repeat" "no-repeat"
|
||||||
|
, property "background-position" "center center"
|
||||||
|
]
|
||||||
|
, selector ":disabled + label"
|
||||||
|
[ property "cursor" "auto"
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
withPulsingStyles =
|
||||||
|
[ property "-webkit-animation" "pulsate 1s infinite"
|
||||||
|
, property "-moz-animation" "pulsate 1s infinite"
|
||||||
|
, property "animation" "pulsate 1s infinite"
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
lockedStyles assets =
|
||||||
|
[ descendants
|
||||||
|
[ Css.Foreign.label
|
||||||
|
[ paddingLeft (px (29 + 6)) -- checkbox width + padding
|
||||||
|
, backgroundImage assets PremiumLocked
|
||||||
|
, property "cursor" "auto"
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
lockOnInsideStyles assets =
|
||||||
|
[ descendants
|
||||||
|
[ Css.Foreign.label
|
||||||
|
[ paddingLeft (px 35)
|
||||||
|
, backgroundImage assets CheckboxLockOnInside
|
||||||
|
, backgroundSize (px 24)
|
||||||
|
, backgroundRepeat noRepeat
|
||||||
|
, property "cursor" "pointer"
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
unlockableStyles assets =
|
||||||
|
[ descendants
|
||||||
|
[ Css.Foreign.label
|
||||||
|
[ paddingLeft (px (29 + 6)) -- checkbox width + padding
|
||||||
|
, backgroundImage assets PremiumKey
|
||||||
|
, property "cursor" "auto"
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
premiumStyles assets =
|
||||||
|
[ children
|
||||||
|
[ Css.Foreign.label
|
||||||
|
[ displayFlex
|
||||||
|
, alignItems center
|
||||||
|
]
|
||||||
|
, selector "label::after"
|
||||||
|
[ property "content" "''"
|
||||||
|
, display inlineBlock
|
||||||
|
, width (px 26)
|
||||||
|
, height (px 24)
|
||||||
|
, marginLeft (px 8)
|
||||||
|
, backgroundImage assets PremiumFlag
|
||||||
|
, backgroundRepeat noRepeat
|
||||||
|
, backgroundPosition Css.center
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
opacifiedStyles =
|
||||||
|
[ descendants [ everything [ opacity (num 0.4) ] ] ]
|
||||||
|
|
||||||
|
|
||||||
|
mainSnippet : List Snippet
|
||||||
|
mainSnippet =
|
||||||
|
[ Css.Foreign.class Container containerStyles
|
||||||
|
, Css.Foreign.class Checkbox checkboxStyles
|
||||||
|
, Css.Foreign.class Label labelStyles
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
square : Assets r -> List Snippet
|
square : Assets r -> List Snippet
|
||||||
square assets =
|
square assets =
|
||||||
[ Css.Foreign.class SquareClass
|
[ Css.Foreign.class SquareClass (squareStyles assets)
|
||||||
[ children
|
|
||||||
[ Css.Foreign.label
|
|
||||||
[ paddingLeft (px (29 + 6)) -- checkbox width + padding
|
|
||||||
]
|
|
||||||
, Css.Foreign.class Unchecked [ backgroundImage assets CheckboxUnchecked ]
|
|
||||||
, Css.Foreign.class Checked [ backgroundImage assets CheckboxChecked ]
|
|
||||||
, Css.Foreign.class Indeterminate [ backgroundImage assets CheckboxCheckedPartially ]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
gray : List Snippet
|
gray : List Snippet
|
||||||
gray =
|
gray =
|
||||||
[ Css.Foreign.class GrayClass
|
[ Css.Foreign.class GrayClass grayStyles
|
||||||
[ children
|
|
||||||
[ Css.Foreign.label [ color Colors.gray45 ] ]
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
orange : Assets r -> List Snippet
|
orange : Assets r -> List Snippet
|
||||||
orange assets =
|
orange assets =
|
||||||
[ Css.Foreign.class OrangeClass
|
[ Css.Foreign.class OrangeClass (orangeStyles assets)
|
||||||
[ children
|
|
||||||
[ Css.Foreign.label
|
|
||||||
[ color Colors.ochre
|
|
||||||
, displayFlex
|
|
||||||
, alignItems center
|
|
||||||
]
|
|
||||||
, selector "label::after"
|
|
||||||
[ property "content" "''"
|
|
||||||
, width (px 26)
|
|
||||||
, height (px 24)
|
|
||||||
, marginLeft (px 8)
|
|
||||||
, backgroundImage assets PremiumUnlocked
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
round : Assets r -> List Snippet
|
round : Assets r -> List Snippet
|
||||||
round assets =
|
round assets =
|
||||||
[ Css.Foreign.class RoundClass
|
[ Css.Foreign.class RoundClass (roundStyles assets)
|
||||||
[ children
|
, Css.Foreign.class WithPulsing withPulsingStyles
|
||||||
[ Css.Foreign.label
|
|
||||||
[ displayFlex
|
|
||||||
, alignItems center
|
|
||||||
, property "cursor" "pointer"
|
|
||||||
]
|
|
||||||
, selector "label::before"
|
|
||||||
[ property "content" "''"
|
|
||||||
, width (px 24)
|
|
||||||
, height (px 24)
|
|
||||||
, marginRight (px 8)
|
|
||||||
, borderRadius (pct 100)
|
|
||||||
]
|
|
||||||
, selector ".checkbox-Unchecked::before"
|
|
||||||
[ border3 (px 2) solid Colors.blue
|
|
||||||
, backgroundColor Colors.white
|
|
||||||
]
|
|
||||||
, selector ".checkbox-Checked::before"
|
|
||||||
[ backgroundColor Colors.green
|
|
||||||
, border3 (px 2) solid Colors.green
|
|
||||||
, backgroundImage assets CheckWhite
|
|
||||||
, property "background-repeat" "no-repeat"
|
|
||||||
, property "background-position" "center center"
|
|
||||||
]
|
|
||||||
, selector ":disabled + label"
|
|
||||||
[ property "cursor" "auto"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
, Css.Foreign.class WithPulsing
|
|
||||||
[ property "-webkit-animation" "pulsate 1s infinite"
|
|
||||||
, property "-moz-animation" "pulsate 1s infinite"
|
|
||||||
, property "animation" "pulsate 1s infinite"
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
locked : Assets r -> List Snippet
|
locked : Assets r -> List Snippet
|
||||||
locked assets =
|
locked assets =
|
||||||
[ Css.Foreign.class LockedClass
|
[ Css.Foreign.class LockedClass (lockedStyles assets)
|
||||||
[ descendants
|
|
||||||
[ Css.Foreign.label
|
|
||||||
[ paddingLeft (px (29 + 6)) -- checkbox width + padding
|
|
||||||
, backgroundImage assets PremiumLocked
|
|
||||||
, property "cursor" "auto"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
lockOnInside : Assets r -> List Snippet
|
lockOnInside : Assets r -> List Snippet
|
||||||
lockOnInside assets =
|
lockOnInside assets =
|
||||||
[ Css.Foreign.class LockOnInsideClass
|
[ Css.Foreign.class LockOnInsideClass (lockOnInsideStyles assets)
|
||||||
[ descendants
|
|
||||||
[ Css.Foreign.label
|
|
||||||
[ paddingLeft (px 35)
|
|
||||||
, backgroundImage assets CheckboxLockOnInside
|
|
||||||
, backgroundSize (px 24)
|
|
||||||
, backgroundRepeat noRepeat
|
|
||||||
, property "cursor" "pointer"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
unlockable : Assets r -> List Snippet
|
unlockable : Assets r -> List Snippet
|
||||||
unlockable assets =
|
unlockable assets =
|
||||||
[ Css.Foreign.class UnlockableClass
|
[ Css.Foreign.class UnlockableClass (unlockableStyles assets)
|
||||||
[ descendants
|
|
||||||
[ Css.Foreign.label
|
|
||||||
[ paddingLeft (px (29 + 6)) -- checkbox width + padding
|
|
||||||
, backgroundImage assets PremiumKey
|
|
||||||
, property "cursor" "auto"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
premiumStyles : Assets r -> List Snippet
|
premiumForeign : Assets r -> List Snippet
|
||||||
premiumStyles assets =
|
premiumForeign assets =
|
||||||
[ Css.Foreign.class PremiumClass
|
[ Css.Foreign.class PremiumClass (premiumStyles assets)
|
||||||
[ children
|
|
||||||
[ Css.Foreign.label
|
|
||||||
[ displayFlex
|
|
||||||
, alignItems center
|
|
||||||
]
|
|
||||||
, selector "label::after"
|
|
||||||
[ property "content" "''"
|
|
||||||
, display inlineBlock
|
|
||||||
, width (px 26)
|
|
||||||
, height (px 24)
|
|
||||||
, marginLeft (px 8)
|
|
||||||
, backgroundImage assets PremiumFlag
|
|
||||||
, backgroundRepeat noRepeat
|
|
||||||
, backgroundPosition Css.center
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
opacified : List Snippet
|
opacified : List Snippet
|
||||||
opacified =
|
opacified =
|
||||||
[ Css.Foreign.class Opacified
|
[ Css.Foreign.class Opacified opacifiedStyles
|
||||||
[ descendants [ everything [ opacity (num 0.4) ] ] ]
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
@ -610,7 +648,7 @@ styles =
|
|||||||
, lockOnInside assets
|
, lockOnInside assets
|
||||||
, unlockable assets
|
, unlockable assets
|
||||||
, opacified
|
, opacified
|
||||||
, premiumStyles assets
|
, premiumForeign assets
|
||||||
]
|
]
|
||||||
|> List.concat
|
|> List.concat
|
||||||
)
|
)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user