49ca378 · rowtype-yoga/ry-blocks

git.iko.soy/rowtype-yoga/ry-blocks

on main help sign in

Improve input borders a bit

49ca378Mark Eibes4 years ago

src/Yoga/Block/Atom/Input/Story.purs+3−3

compare with main

unifiedsplit

@@ -62,13 +62,13 @@ input = do

62 }

63 ]

64 , Block.box

65− { background: colour.backgroundLayer1

65+ { background: colour.backgroundInverted

66 }

67 [ element Input.component

68 { label: nes (Proxy ∷ _ "Another background")

69− , background: colour.backgroundLayer3

69+ -- , background: colour.highlight

70 , textColour: "blue"

71− , placeholderColour: colour.backgroundLayer3

71+ , placeholderColour: colour.backgroundInverted

72 , leading: R.text "🌭"

73 }

74 ]

src/Yoga/Block/Atom/Input/Style.purs+14−7

@@ -175,20 +175,13 @@ inputContainer props = theCss <>? props.css

175 css

176 { "--left-icon-size": var "--s0"

177 , "--right-icon-size": str "calc(var(--s0) * 1.2)"

178− , "--input-border-radius": var "--s-1"

179 , "--input-side-padding": str "calc(var(--s-1) * 1.2)"

178 , "--input-side-padding": str "calc(var(--s-1) * 1.2)"

180 , "--input-top-padding": var "--s-5"

179 , "--input-top-padding": var "--s-5"

181 , "--input-bottom-padding": var "--s-5"

180 , "--input-bottom-padding": var "--s-5"

182− , "--border-width": str "1px"

183 , letterSpacing: em (-0.011)

181 , letterSpacing: em (-0.011)

184 , position: relative

182 , position: relative

185 , cursor: str "text"

183 , cursor: str "text"

186 , boxSizing: borderBox

184 , boxSizing: borderBox

187− , boxShadow: str """

188− 0 1px 1px rgba(200,200,255,0.2),

189− 0 2px 2px rgba(200,200,255,0.1),

190− 0 4px 8px rgba(200,200,255,0.03)"""

191− , background: str (props.background ?|| colour.inputBackground)

192 , display: flex

185 , display: flex

193 , width: str "calc(var(--s4) * 2)"

186 , width: str "calc(var(--s4) * 2)"

194 , """&[data-invalid="false"]""":

187 , """&[data-invalid="false"]""":

@@ -224,6 +217,20 @@ inputContainer props = theCss <>? props.css

224 , borderRadius: var "--input-border-radius"

217 , borderRadius: var "--input-border-radius"

225 }

218 }

226

219

220+containerContainer ∷ ∀ r. { | Props OptionalProp r } -> Style

221+containerContainer props = css { display: grid

222+ , "--border-width": str "1px"

223+ , "--input-border-radius": var "--s-1"

224+ , background: str (props.background ?|| colour.inputBackground)

225+ , boxSizing: contentBox

226+ , borderRadius: var "--input-border-radius"

227+ , boxShadow: str """

228+ 0 1px 1px rgba(200,200,255,0.2),

229+ 0 2px 2px rgba(200,200,255,0.1),

230+ 0 4px 8px rgba(200,200,255,0.03)"""

231+ , border: str $ "var(--border-width) solid " <> colour.inputBorder

232+ }

233+

227inputWrapper ∷ Style

234inputWrapper ∷ Style

228inputWrapper =

235inputWrapper =

229 css

236 css

src/Yoga/Block/Atom/Input/View/Container.purs+25−23

@@ -8,6 +8,7 @@ import Foreign.NullOrUndefined (undefined)

8import Framer.Motion as M

9import Partial.Unsafe (unsafeCrashWith)

10import React.Basic.DOM (CSS, css)

11+import React.Basic.DOM as R

11import React.Basic.Emotion (Style)

12import React.Basic.Emotion (Style)

12import React.Basic.Hooks as React

13import React.Basic.Hooks as React

13import Unsafe.Coerce (unsafeCoerce)

14import Unsafe.Coerce (unsafeCoerce)

@@ -48,29 +49,30 @@ rawContainer =

48 let

49 let

49 containerVariants = mkContainerVariants dimensions

50 containerVariants = mkContainerVariants dimensions

50 containerVariantLabels = mkContainerVariantLabels containerVariants

51 containerVariantLabels = mkContainerVariantLabels containerVariants

51− result =

52+ result = R.div' </* { css: Style.containerContainer props } />

52− M.div

53+ [ M.div

53− </*

54+ </*

54− ( { variants: M.variants containerVariants

55+ ( { variants: M.variants containerVariants

55− , initial: M.initial false

56+ , initial: M.initial false

56− , animate:

57+ , animate:

57− M.animate

58+ M.animate

58− if props.hasFocus then

59+ if props.hasFocus then

59− containerVariantLabels.focussed

60+ containerVariantLabels.focussed

60− else

61+ else

61− containerVariantLabels.blurred

62+ containerVariantLabels.blurred

62− , className: "ry-input-container"

63+ , className: "ry-input-container"

63− , key: show sizes.innerWidth -- redraw

64+ , key: show sizes.innerWidth -- redraw

64− , css: Style.inputContainer props

65+ , css: Style.inputContainer props

65− , ref

66+ , ref

66− } `unsafeAddProps`

67+ } `unsafeAddProps`

67− { "data-invalid":

68+ { "data-invalid":

68− props.isInvalid

69+ props.isInvalid

69− # opToMaybe

70+ # opToMaybe

70− # maybe (unsafeCoerce undefined) show

71+ # maybe (unsafeCoerce undefined) show

71− }

72+ }

72− )

73+ )

73− /> props.children

74+ /> props.children

75+ ]

74 pure result

76 pure result

76drawPathUntil ∷ Int -> Array Point -> String

78drawPathUntil ∷ Int -> Array Point -> String

src/Yoga/Block/Icon/SVG/Spinner.pursnew file+196

@@ -0,0 +1,196 @@

1+module Yoga.Block.Icon.SVG.Spinner where

3+import React.Basic (JSX)

4+import React.Basic.DOM as R

5+import React.Basic.DOM.SVG as SVG

7+spinner :: JSX

8+spinner = SVG.svg

9+ { xmlns: "http://www.w3.org/2000/svg"

10+ , style: R.css { margin: "auto", background: "#f1f2f3", display: "block" }

11+ , width: "91"

12+ , height: "91"

13+ , viewBox: "0 0 100 100"

14+ , preserveAspectRatio: "xMidYMid"

15+ , children:

16+ [ SVG.rect

17+ { x: "48.5"

18+ , y: "38.5"

19+ , rx: "0"

20+ , ry: "0"

21+ , width: "3"

22+ , height: "7"

23+ , fill: "#0a0a0a"

24+ , children:

25+ [ SVG.animate

26+ { attributeName: "opacity"

27+ , values: "1;0"

28+ , keyTimes: "0;1"

29+ , dur: "1s"

30+ , begin: "-0.8888888888888888s"

31+ , repeatCount: "indefinite"

32+ }

33+ ]

34+ }

35+ , SVG.rect

36+ { x: "48.5"

37+ , y: "38.5"

38+ , rx: "0"

39+ , ry: "0"

40+ , width: "3"

41+ , height: "7"

42+ , fill: "#0a0a0a"

43+ , transform: "rotate(40 50 50)"

44+ , children:

45+ [ SVG.animate

46+ { attributeName: "opacity"

47+ , values: "1;0"

48+ , keyTimes: "0;1"

49+ , dur: "1s"

50+ , begin: "-0.7777777777777778s"

51+ , repeatCount: "indefinite"

52+ }

53+ ]

54+ }

55+ , SVG.rect

56+ { x: "48.5"

57+ , y: "38.5"

58+ , rx: "0"

59+ , ry: "0"

60+ , width: "3"

61+ , height: "7"

62+ , fill: "#0a0a0a"

63+ , transform: "rotate(80 50 50)"

64+ , children:

65+ [ SVG.animate

66+ { attributeName: "opacity"

67+ , values: "1;0"

68+ , keyTimes: "0;1"

69+ , dur: "1s"

70+ , begin: "-0.6666666666666666s"

71+ , repeatCount: "indefinite"

72+ }

73+ ]

74+ }

75+ , SVG.rect

76+ { x: "48.5"

77+ , y: "38.5"

78+ , rx: "0"

79+ , ry: "0"

80+ , width: "3"

81+ , height: "7"

82+ , fill: "#0a0a0a"

83+ , transform: "rotate(120 50 50)"

84+ , children:

85+ [ SVG.animate

86+ { attributeName: "opacity"

87+ , values: "1;0"

88+ , keyTimes: "0;1"

89+ , dur: "1s"

90+ , begin: "-0.5555555555555556s"

91+ , repeatCount: "indefinite"

92+ }

93+ ]

94+ }

95+ , SVG.rect

96+ { x: "48.5"

97+ , y: "38.5"

98+ , rx: "0"

99+ , ry: "0"

100+ , width: "3"

101+ , height: "7"

102+ , fill: "#0a0a0a"

103+ , transform: "rotate(160 50 50)"

104+ , children:

105+ [ SVG.animate

106+ { attributeName: "opacity"

107+ , values: "1;0"

108+ , keyTimes: "0;1"

109+ , dur: "1s"

110+ , begin: "-0.4444444444444444s"

111+ , repeatCount: "indefinite"

112+ }

113+ ]

114+ }

115+ , SVG.rect

116+ { x: "48.5"

117+ , y: "38.5"

118+ , rx: "0"

119+ , ry: "0"

120+ , width: "3"

121+ , height: "7"

122+ , fill: "#0a0a0a"

123+ , transform: "rotate(200 50 50)"

124+ , children:

125+ [ SVG.animate

126+ { attributeName: "opacity"

127+ , values: "1;0"

128+ , keyTimes: "0;1"

129+ , dur: "1s"

130+ , begin: "-0.3333333333333333s"

131+ , repeatCount: "indefinite"

132+ }

133+ ]

134+ }

135+ , SVG.rect

136+ { x: "48.5"

137+ , y: "38.5"

138+ , rx: "0"

139+ , ry: "0"

140+ , width: "3"

141+ , height: "7"

142+ , fill: "#0a0a0a"

143+ , transform: "rotate(240 50 50)"

144+ , children:

145+ [ SVG.animate

146+ { attributeName: "opacity"

147+ , values: "1;0"

148+ , keyTimes: "0;1"

149+ , dur: "1s"

150+ , begin: "-0.2222222222222222s"

151+ , repeatCount: "indefinite"

152+ }

153+ ]

154+ }

155+ , SVG.rect

156+ { x: "48.5"

157+ , y: "38.5"

158+ , rx: "0"

159+ , ry: "0"

160+ , width: "3"

161+ , height: "7"

162+ , fill: "#0a0a0a"

163+ , transform: "rotate(280 50 50)"

164+ , children:

165+ [ SVG.animate

166+ { attributeName: "opacity"

167+ , values: "1;0"

168+ , keyTimes: "0;1"

169+ , dur: "1s"

170+ , begin: "-0.1111111111111111s"

171+ , repeatCount: "indefinite"

172+ }

173+ ]

174+ }

175+ , SVG.rect

176+ { x: "48.5"

177+ , y: "38.5"

178+ , rx: "0"

179+ , ry: "0"

180+ , width: "3"

181+ , height: "7"

182+ , fill: "#0a0a0a"

183+ , transform: "rotate(320 50 50)"

184+ , children:

185+ [ SVG.animate

186+ { attributeName: "opacity"

187+ , values: "1;0"

188+ , keyTimes: "0;1"

189+ , dur: "1s"

190+ , begin: "0s"

191+ , repeatCount: "indefinite"

192+ }

193+ ]

194+ }

195+ ]

196+ }

src/Yoga/Block/Icon/SVG/spinner.svgnew file+1

@@ -0,0 +1 @@

1+<svg xmlns="http://www.w3.org/2000/svg" style="margin:auto;background:#f1f2f3;display:block" width="91" height="91" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><rect x="48.5" y="38.5" rx="0" ry="0" width="3" height="7" fill="#0a0a0a"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8888888888888888s" repeatCount="indefinite"/></rect><rect x="48.5" y="38.5" rx="0" ry="0" width="3" height="7" fill="#0a0a0a" transform="rotate(40 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7777777777777778s" repeatCount="indefinite"/></rect><rect x="48.5" y="38.5" rx="0" ry="0" width="3" height="7" fill="#0a0a0a" transform="rotate(80 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"/></rect><rect x="48.5" y="38.5" rx="0" ry="0" width="3" height="7" fill="#0a0a0a" transform="rotate(120 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5555555555555556s" repeatCount="indefinite"/></rect><rect x="48.5" y="38.5" rx="0" ry="0" width="3" height="7" fill="#0a0a0a" transform="rotate(160 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4444444444444444s" repeatCount="indefinite"/></rect><rect x="48.5" y="38.5" rx="0" ry="0" width="3" height="7" fill="#0a0a0a" transform="rotate(200 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"/></rect><rect x="48.5" y="38.5" rx="0" ry="0" width="3" height="7" fill="#0a0a0a" transform="rotate(240 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.2222222222222222s" repeatCount="indefinite"/></rect><rect x="48.5" y="38.5" rx="0" ry="0" width="3" height="7" fill="#0a0a0a" transform="rotate(280 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.1111111111111111s" repeatCount="indefinite"/></rect><rect x="48.5" y="38.5" rx="0" ry="0" width="3" height="7" fill="#0a0a0a" transform="rotate(320 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"/></rect></svg>