-
Notifications
You must be signed in to change notification settings - Fork 463
/
Css.purs
100 lines (77 loc) · 3.83 KB
/
Css.purs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
module Css
( classNames
, toggleWhen
, applyWhen
, hideWhen
, bgBlueGradient
, button
, withIcon
, withShadow
, primaryButton
, secondaryButton
, whiteButton
, input
, inputCard
, inputError
, hasNestedLabel
, nestedLabel
, overlay
, card
, largeCard
, iconCircle
, fixedBottomRight
) where
import Prelude
import Halogen (ClassName(ClassName))
import Halogen.HTML.Properties (IProp, classes)
import Material.Icons (Icon, iconClass)
classNames :: forall r i. Array String -> IProp ( class :: String | r ) i
classNames = classes <<< map ClassName
--- utilities
toggleWhen :: Boolean -> Array String -> Array String -> Array String
toggleWhen condition classes1 classes2 = if condition then classes1 else classes2
applyWhen :: Boolean -> Array String -> Array String
applyWhen condition classes = if condition then classes else []
hideWhen :: Boolean -> Array String
hideWhen condition = applyWhen condition [ "hidden" ]
--- color gradients
bgBlueGradient :: Array String
bgBlueGradient = [ "bg-gradient-to-r", "from-purple", "to-lightpurple", "text-white" ]
-- buttons
button :: Array String
button = [ "leading-none", "whitespace-nowrap", "px-6", "py-4", "font-black", "rounded-lg", "transition-all", "duration-200", "hover:shadow", "outline-none", "focus:outline-none", "disabled:bg-none", "disabled:bg-lightgray", "disabled:text-darkgray", "disabled:shadow-none" ]
withShadow :: Array String
withShadow = [ "shadow", "hover:shadow-lg" ]
primaryButton :: Array String
primaryButton = button <> bgBlueGradient <> withShadow
secondaryButton :: Array String
secondaryButton = button <> [ "bg-lightgray", "text-black" ]
whiteButton :: Array String
whiteButton = button <> withShadow <> [ "bg-white" ]
withIcon :: Icon -> Array String
withIcon icon = [ "with-icon", "with-icon-" <> iconClass icon ]
--- inputs
inputBase :: Array String
inputBase = [ "block", "w-full", "border", "p-4", "rounded", "transition-all", "duration-200", "outline-none", "focus:outline-none" ]
input :: Boolean -> Array String
input invalid = inputBase <> [ "hover:shadow", "focus:shadow" ] <> toggleWhen invalid [ "border-red" ] [ "border-gray", "hover:border-black", "focus:border-black" ]
inputCard :: Boolean -> Array String
inputCard invalid = inputBase <> [ "shadow-sm", "hover:shadow", "focus:shadow" ] <> toggleWhen invalid [ "border-red" ] [ "border-transparent" ]
inputError :: Array String
inputError = [ "text-red", "text-sm" ]
hasNestedLabel :: Array String
hasNestedLabel = [ "-mt-4" ]
nestedLabel :: Array String
nestedLabel = [ "relative", "left-2", "top-2.5", "px-1", "bg-white", "text-xs", "font-semibold" ]
--- cards
overlay :: Boolean -> Array String
overlay invisible = [ "overflow-hidden", "absolute", "top-0", "bottom-0", "left-0", "right-0", "z-20", "flex", "justify-center", "content-end", "md:content-center", "last:bg-overlay", "transition-opacity", "duration-400" ] <> toggleWhen invisible [ "opacity-0", "pointer-events-none" ] [ "opacity-1" ]
card :: Boolean -> Array String
card invisible = [ "overflow-hidden", "bg-white", "flex-grow", "max-w-sm", "mx-2", "shadow", "rounded-t", "md:rounded-b", "transform", "transition-transform", "duration-400", "self-end", "md:self-center" ] <> applyWhen invisible [ "translate-y-20" ]
largeCard :: Boolean -> Array String
largeCard invisible = [ "bg-grayblue", "shadow", "overflow-auto", "flex-grow", "mt-2", "md:mb-2", "mx-2", "lg:my-4", "md:mx-5pc", "rounded-t", "md:rounded-b", "transform", "transition-transform", "duration-400" ] <> applyWhen invisible [ "translate-y-20" ]
--- miscellaneous
iconCircle :: Boolean -> Array String
iconCircle enabled = [ "inline-flex", "items-center", "justify-center", "w-8", "h-8", "rounded-full" ] <> toggleWhen enabled bgBlueGradient [ "bg-lightgray", "text-darkgray" ]
fixedBottomRight :: Array String
fixedBottomRight = [ "absolute", "bottom-4", "right-4", "md:right-5pc" ]