@@ -3,17 +3,18 @@ module Fahrtwind.Style.ScollBar where
33import Prelude
44
55import Color (Color, cssStringRGBA)
6−import React.Basic.Emotion (Style, css, nested, str)
6+import React.Basic.Emotion (Style, StyleProperty, css, nested, str)
77import React.Basic.Emotion as E
8+import Unsafe.Coerce (unsafeCoerce)
89
9−scrollBar
10− :: { background :: Color
11− , col :: Color
12− , width :: Int
13− , borderRadius :: Int
14− , borderWidth :: Int
15− }
16− -> Style
10+scrollBar ∷
11+ { background ∷ Color
12+ , col ∷ Color
13+ , width ∷ Int
14+ , borderRadius ∷ Int
15+ , borderWidth ∷ Int
16+ } →
17+ Style
1718scrollBar { background, col, width, borderRadius, borderWidth } = css
1819 { -- Firefox
1920 scrollbarWidth: E.auto
@@ -29,6 +30,30 @@ scrollBar { background, col, width, borderRadius, borderWidth } = css
2930 , "&::-webkit-scrollbar-thumb": nested $ css
3031 { background: str $ cssStringRGBA col
3132 , borderRadius: str $ show borderRadius <> "px"
32− , border: str $ show borderWidth <> "px solid " <> cssStringRGBA background
33+ , border: str $ show borderWidth <> "px solid " <> cssStringRGBA
34+ background
3335 }
3436 }
37+
38+scrollBar' ∷
39+ { background ∷ StyleProperty
40+ , col ∷ StyleProperty
41+ , width ∷ StyleProperty
42+ , borderRadius ∷ StyleProperty
43+ , borderWidth ∷ StyleProperty
44+ } →
45+ Style
46+scrollBar' { background, col, width, borderRadius, borderWidth } = css
47+ { -- Firefox
48+ scrollbarWidth: E.auto
49+ , scrollbarColor: str (unsafeCoerce col <> " " <> unsafeCoerce background)
50+ -- Chrome, Edge, and Safari
51+ , "&::-webkit-scrollbar": nested $ css { width }
52+ , "&::-webkit-scrollbar-track": nested $ css { background }
53+ , "&::-webkit-scrollbar-thumb": nested $ css
54+ { background: col
55+ , borderRadius
56+ , border: str
57+ (unsafeCoerce borderWidth <> " solid " <> unsafeCoerce background)
58+ }
59+ }