49ca378 · rowtype-yoga/ry-blocks

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

Improve input borders a bit

commit49ca378f51c0078f4bcfa6206c260b0929166752 authorMark Eibes <mark.eibes@gmail.com> dateTue 28 Jun 2022, 19:55 (4 years ago) parent6ea837a

5 files changed+239−33

compare with main

unifiedsplit

src/Yoga/Block/Atom/Input/Story.purs+3−3 src/Yoga/Block/Atom/Input/Style.purs+14−7 src/Yoga/Block/Atom/Input/View/Container.purs+25−23 src/Yoga/Block/Icon/SVG/Spinner.purs+196 src/Yoga/Block/Icon/SVG/spinner.svg+1

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

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

6262 }

6363 ]

6464 , Block.box

65− { background: colour.backgroundLayer1

65+ { background: colour.backgroundInverted

6666 }

6767 [ element Input.component

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

69− , background: colour.backgroundLayer3

69+ -- , background: colour.highlight

7070 , textColour: "blue"

71− , placeholderColour: colour.backgroundLayer3

71+ , placeholderColour: colour.backgroundInverted

7272 , leading: R.text "🌭"

7373 }

7474 ]

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

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

175175 css

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

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

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

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

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

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

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

183181 , letterSpacing: em (-0.011)

184182 , position: relative

185183 , cursor: str "text"

186184 , 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)

192185 , display: flex

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

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

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

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

225218 }

226219

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+

227234inputWrapper ∷ Style

228235inputWrapper =

229236 css

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

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

88import Framer.Motion as M

99import Partial.Unsafe (unsafeCrashWith)

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

11+import React.Basic.DOM as R

1112import React.Basic.Emotion (Style)

1213import React.Basic.Hooks as React

1314import Unsafe.Coerce (unsafeCoerce)

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

4849 let

4950 containerVariants = mkContainerVariants dimensions

5051 containerVariantLabels = mkContainerVariantLabels containerVariants

51− result =

52− M.div

53− </*

54− ( { variants: M.variants containerVariants

55− , initial: M.initial false

56− , animate:

57− M.animate

58− if props.hasFocus then

59− containerVariantLabels.focussed

60− else

61− containerVariantLabels.blurred

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

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

64− , css: Style.inputContainer props

65− , ref

66− } `unsafeAddProps`

67− { "data-invalid":

68− props.isInvalid

69− # opToMaybe

70− # maybe (unsafeCoerce undefined) show

71− }

72− )

73− /> props.children

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

53+ [ M.div

54+ </*

55+ ( { variants: M.variants containerVariants

56+ , initial: M.initial false

57+ , animate:

58+ M.animate

59+ if props.hasFocus then

60+ containerVariantLabels.focussed

61+ else

62+ containerVariantLabels.blurred

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

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

65+ , css: Style.inputContainer props

66+ , ref

67+ } `unsafeAddProps`

68+ { "data-invalid":

69+ props.isInvalid

70+ # opToMaybe

71+ # maybe (unsafeCoerce undefined) show

72+ }

73+ )

74+ /> props.children

75+ ]

7476 pure result

7577

7678drawPathUntil ∷ 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>