3f73268 · rowtype-yoga/ry-blocks

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

Fix some CSS in switcher

commit3f732682f6c22119e1d3c0611264366ed512a575 authorMark Eibes <mark.eibes@gmail.com> dateTue 27 Jul 2021, 09:22 (5 years ago) parent93c0f0d

8 files changed+383−67

compare with main

unifiedsplit

src/Yoga/Block.purs+35−35 src/Yoga/Block/Icon/SVG/Background.purs+267 src/Yoga/Block/Icon/SVG/MurmurasLogos.purs+33 src/Yoga/Block/Icon/SVG/MurmurasLogos.svg+1 src/Yoga/Block/Icon/SVG/after.svg+1−1 src/Yoga/Block/Icon/SVG/background.svg+1 src/Yoga/Block/Layout/Switcher/Story.purs+23−7 src/Yoga/Block/Layout/Switcher/Style.purs+22−24

src/Yoga/Block.purs+35−35

@@ -24,113 +24,113 @@ import Yoga.Block.Layout.Switcher as Switcher

2424import Yoga.Block.Molecule.Modal as Modal

2525import Yoga.Block.Molecule.ReadMore as ReadMore

2626

27−box' ∷ ∀ p q. Union p q Box.Props => ReactComponent { | p }

27+box' ∷ ∀ p q. Union p q Box.Props ⇒ ReactComponent { | p }

2828box' = Box.component

2929

30−box ∷ ∀ p q. Lacks "children" p => Union p q Box.PropsNoChildren => { | p } -> Array JSX -> JSX

30+box ∷ ∀ p q. Lacks "children" p ⇒ Union p q Box.PropsNoChildren ⇒ { | p } → Array JSX → JSX

3131box = el box'

3232

33−box_ ∷ Array JSX -> JSX

33+box_ ∷ Array JSX → JSX

3434box_ = box {}

3535

36−button' ∷ ∀ p q. Union p q Button.Props => ReactComponent { | p }

36+button' ∷ ∀ p q. Union p q Button.Props ⇒ ReactComponent { | p }

3737button' = Button.component

3838

39−button ∷ ∀ p q. Lacks "children" p => Union p q Button.PropsNoChildren => { | p } -> Array JSX -> JSX

39+button ∷ ∀ p q. Lacks "children" p ⇒ Union p q Button.PropsNoChildren ⇒ { | p } → Array JSX → JSX

4040button = el button'

4141

42−button_ ∷ Array JSX -> JSX

42+button_ ∷ Array JSX → JSX

4343button_ = button {}

4444

45−centre' ∷ ∀ p q. Union p q Centre.Props => ReactComponent { | p }

45+centre' ∷ ∀ p q. Union p q Centre.Props ⇒ ReactComponent { | p }

4646centre' = Centre.component

4747

48−centre ∷ ∀ p q. Lacks "children" p => Union p q Centre.PropsNoChildren => { | p } -> Array JSX -> JSX

48+centre ∷ ∀ p q. Lacks "children" p ⇒ Union p q Centre.PropsNoChildren ⇒ { | p } → Array JSX → JSX

4949centre = el centre'

5050

51−centre_ ∷ Array JSX -> JSX

51+centre_ ∷ Array JSX → JSX

5252centre_ = centre {}

5353

54−cluster' ∷ ∀ p q. Union p q Cluster.Props => ReactComponent { | p }

54+cluster' ∷ ∀ p q. Union p q Cluster.Props ⇒ ReactComponent { | p }

5555cluster' = Cluster.component

5656

57−cluster ∷ ∀ p q. Lacks "children" p => Union p q Cluster.PropsNoChildren => { | p } -> Array JSX -> JSX

57+cluster ∷ ∀ p q. Lacks "children" p ⇒ Union p q Cluster.PropsNoChildren ⇒ { | p } → Array JSX → JSX

5858cluster = el cluster'

5959

60−cluster_ ∷ Array JSX -> JSX

60+cluster_ ∷ Array JSX → JSX

6161cluster_ = cluster {}

6262

63−container ∷ ∀ p q. Union p q Container.Props => ReactComponent { | p }

63+container ∷ ∀ p q. Union p q Container.Props ⇒ ReactComponent { | p }

6464container = Container.component

6565

66−cover' ∷ ∀ p q. Union p q Cover.Props => ReactComponent { | p }

66+cover' ∷ ∀ p q. Union p q Cover.Props ⇒ ReactComponent { | p }

6767cover' = Cover.component

6868

69−cover ∷ ∀ p q. Lacks "children" p => Union p q Cover.PropsNoChildren => { | p } -> Array JSX -> JSX

69+cover ∷ ∀ p q. Lacks "children" p ⇒ Union p q Cover.PropsNoChildren ⇒ { | p } → Array JSX → JSX

7070cover = el cover'

7171

72−cover_ ∷ Array JSX -> JSX

72+cover_ ∷ Array JSX → JSX

7373cover_ = cover {}

7474

75−grid' ∷ ∀ p q. Union p q Grid.Props => ReactComponent { children ∷ Array JSX | p }

75+grid' ∷ ∀ p q. Union p q Grid.Props ⇒ ReactComponent { children ∷ Array JSX | p }

7676grid' = Grid.component

7777

78−grid ∷ ∀ p q. Lacks "children" p => Union p q Grid.Props => { | p } -> Array JSX -> JSX

78+grid ∷ ∀ p q. Lacks "children" p ⇒ Union p q Grid.Props ⇒ { | p } → Array JSX → JSX

7979grid = el grid'

8080

81−grid_ ∷ Array JSX -> JSX

81+grid_ ∷ Array JSX → JSX

8282grid_ = grid {}

8383

84−icon ∷ ∀ p q. Union p q Icon.Props => ReactComponent { | Icon.MandatoryProps p }

84+icon ∷ ∀ p q. Union p q Icon.Props ⇒ ReactComponent { | Icon.MandatoryProps p }

8585icon = Icon.component

8686

87−input ∷ ∀ p q. Union p q Input.Props => ReactComponent { | p }

87+input ∷ ∀ p q. Union p q Input.Props ⇒ ReactComponent { | p }

8888input = Input.component

8989

90−imposter ∷ ∀ p q. Union p q Imposter.Props => ReactComponent { | p }

90+imposter ∷ ∀ p q. Union p q Imposter.Props ⇒ ReactComponent { | p }

9191imposter = Imposter.component

9292

93−popover ∷ ∀ p p_. Union p p_ Popover.Props => ReactComponent { | Popover.MandatoryProps p }

93+popover ∷ ∀ p p_. Union p p_ Popover.Props ⇒ ReactComponent { | Popover.MandatoryProps p }

9494popover = Popover.component

9595

9696modal ∷ ReactComponent Modal.Props

9797modal = Modal.component

9898

99−range ∷ ∀ p q. Union p q Range.Props => ReactComponent { | p }

99+range ∷ ∀ p q. Union p q Range.Props ⇒ ReactComponent { | p }

100100range = Range.component

101101

102102segmented' ∷ ReactComponent Segmented.Props

103103segmented' = Segmented.component

104104

105−segmented ∷ Segmented.Props -> JSX

105+segmented ∷ Segmented.Props → JSX

106106segmented = leaf Segmented.component

107107

108−sidebar' ∷ ∀ p q. Union p q Sidebar.Props => ReactComponent { sidebar ∷ JSX, children ∷ Array JSX | p }

108+sidebar' ∷ ∀ p q. Union p q Sidebar.Props ⇒ ReactComponent { sidebar ∷ JSX, children ∷ Array JSX | p }

109109sidebar' = Sidebar.component

110110

111−sidebar ∷ ∀ p q. Lacks "children" p => Union p q Sidebar.Props => { sidebar ∷ JSX | p } -> Array JSX -> JSX

111+sidebar ∷ ∀ p q. Lacks "children" p ⇒ Union p q Sidebar.Props ⇒ { sidebar ∷ JSX | p } → Array JSX → JSX

112112sidebar = el sidebar'

113113

114−sidebar_ ∷ JSX -> Array JSX -> JSX

114+sidebar_ ∷ JSX → Array JSX → JSX

115115sidebar_ jsx = sidebar { sidebar: jsx }

116116

117−stack' ∷ ∀ p q. Union p q Stack.Props => ReactComponent { children ∷ Array JSX | p }

117+stack' ∷ ∀ p q. Union p q Stack.Props ⇒ ReactComponent { children ∷ Array JSX | p }

118118stack' = Stack.component

119119

120−stack ∷ ∀ p q. Lacks "children" p => Union p q Stack.Props => { | p } -> Array JSX -> JSX

120+stack ∷ ∀ p q. Lacks "children" p ⇒ Union p q Stack.Props ⇒ { | p } → Array JSX → JSX

121121stack = el stack'

122122

123−stack_ ∷ Array JSX -> JSX

123+stack_ ∷ Array JSX → JSX

124124stack_ = stack {}

125125

126−switcher ∷ ∀ p q. Union p q Switcher.Props => ReactComponent { | p }

126+switcher ∷ ∀ p q. Union p q Switcher.Props ⇒ ReactComponent { | p }

127127switcher = Switcher.component

128128

129−toggle ∷ ∀ p q. Union p q Toggle.Props => ReactComponent { | p }

129+toggle ∷ ∀ p q. Union p q Toggle.Props ⇒ ReactComponent { | p }

130130toggle = Toggle.component

131131

132−tooltip ∷ ∀ p q. Union p q Tooltip.Props => ReactComponent { | Tooltip.MandatoryProps p }

132+tooltip ∷ ∀ p q. Union p q Tooltip.Props ⇒ ReactComponent { | Tooltip.MandatoryProps p }

133133tooltip = Tooltip.component

134134

135−readMore ∷ ∀ p q. Union p q ReadMore.Props => ReactComponent (Record p)

135+readMore ∷ ∀ p q. Union p q ReadMore.Props ⇒ ReactComponent (Record p)

136136readMore = ReadMore.component

src/Yoga/Block/Icon/SVG/Background.pursnew file+267

@@ -0,0 +1,267 @@

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

3+import React.Basic (JSX)

4+import React.Basic.DOM as R

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

7+background :: JSX

8+background = SVG.svg

9+ { width: "1200"

10+ , height: "2011"

11+ , fill: "none"

12+ , xmlns: "http://www.w3.org/2000/svg"

13+ , children:

14+ [ SVG.path

15+ { fillRule: "evenodd"

16+ , clipRule: "evenodd"

17+ , d: "m0 0 18 4.628c18 4.628 55 13.884 91 18.512s73 4.628 109 6.171c37 1.543 73 4.628 109 7.714 37 3.085 73 6.17 109 10.798 37 4.628 73 10.8 109 9.256 37-1.542 73-10.798 110-18.512 36-7.713 72-13.884 109-12.341 36 1.542 72 10.799 109 12.341 36 1.543 72-4.628 109-10.799 36-6.17 73-12.341 109-9.256 36 3.086 73 15.427 91 21.598l18 6.17V336H0V0z"

18+ , fill: "url(#a)"

19+ }

20+ , SVG.path

21+ { fillRule: "evenodd"

22+ , clipRule: "evenodd"

23+ , d: "m1200 236.211-50-4.654c-50-4.655-150-13.965-250-41.895-100-27.929-200-74.478-300-83.788-100-9.31-200 18.619-300 27.929-100 9.31-200 0-250-4.655l-50-4.655V455h1200V236.211z"

24+ , fill: "url(#b)"

25+ }

26+ , SVG.path

27+ { fillRule: "evenodd"

28+ , clipRule: "evenodd"

29+ , d: "m0 144 50 32.386c50 32.385 150 97.156 250 106.409s200-37.012 300-41.638c100-4.627 200 32.385 300 50.891s200 18.506 250 18.506h50V528H0V144z"

30+ , fill: "url(#c)"

31+ }

32+ , SVG.path

33+ { fillRule: "evenodd"

34+ , clipRule: "evenodd"

35+ , d: "m0 266 33 28.488c34 28.487 100 85.462 167 85.462s133-56.975 200-47.479c67 9.496 133 85.463 200 104.455 67 18.991 133-18.992 200-18.992s133 37.983 200 56.975c67 18.992 133 18.992 167 18.992h33V649H0V266z"

36+ , fill: "url(#d)"

37+ }

38+ , SVG.path

39+ { fillRule: "evenodd"

40+ , clipRule: "evenodd"

41+ , d: "m0 503.083 22-3.409c22-3.409 67-10.227 111-13.635 45-3.409 89-3.409 134 6.817 44 10.227 89 30.679 133 34.088 44 3.409 89-10.226 133-13.635 45-3.409 89 3.409 134 27.27 44 23.862 89 64.767 133 68.176 44 3.409 89-30.679 133-44.314 45-13.635 89-6.818 134 6.817 44 13.635 89 34.088 111 44.314l22 10.227V911H0V503.083z"

42+ , fill: "url(#e)"

43+ }

44+ , SVG.path

45+ { fillRule: "evenodd"

46+ , clipRule: "evenodd"

47+ , d: "m0 655.221 22-1.901c22-1.901 67-5.703 111-3.802 45 1.901 89 9.505 134 20.911 44 11.405 89 26.613 133 26.613s89-15.208 133-15.208c45 0 89 15.208 134 22.812 44 7.603 89 7.603 133-5.703 44-13.307 89-39.92 133-41.821 45-1.901 89 20.91 134 34.217 44 13.307 89 17.109 111 19.01l22 1.9V968H0V655.221z"

48+ , fill: "url(#f)"

49+ }

50+ , SVG.path

51+ { fillRule: "evenodd"

52+ , clipRule: "evenodd"

53+ , d: "m0 848.096 33 8.219c34 8.219 100 24.658 167 20.548 67-4.11 133-28.767 200-45.205C467 815.219 533 807 600 807s133 8.219 200 20.548c67 12.329 133 28.767 200 28.767s133-16.438 167-24.657l33-8.22V1107H0V848.096z"

54+ , fill: "url(#g)"

55+ }

56+ , SVG.path

57+ { fillRule: "evenodd"

58+ , clipRule: "evenodd"

59+ , d: "m0 925.667 50 18c50 18 150 54 250 54s200-36 300-60 200-36 300-18 200 66 250 90.003l50 24V1363H0V925.667z"

60+ , fill: "url(#h)"

61+ }

62+ , SVG.path

63+ { fillRule: "evenodd"

64+ , clipRule: "evenodd"

65+ , d: "m0 1056.25 25-2.42c25-2.42 75-7.26 125 0s100 26.62 150 38.72c50 12.1 100 16.94 150 14.52 50-2.42 100-12.1 150-16.94 50-4.84 100-4.84 150 2.42s100 21.77 150 36.29 100 29.04 150 26.62c50-2.42 100-21.78 125-31.46l25-9.68V1409H0v-352.75z"

66+ , fill: "url(#i)"

67+ }

68+ , SVG.path

69+ { fillRule: "evenodd"

70+ , clipRule: "evenodd"

71+ , d: "M0 1216.77v-8.62c28.5-.02 100 12.03 150 0s100-18.9 150-10.31c50 8.59 100 32.66 150 32.66s100-24.07 150-25.79c50-1.71 100 18.91 150 32.66 50 13.75 100 20.63 150 15.47 50-5.16 100-22.34 150-24.06 50-1.72 100 12.03 125 18.9l25 6.88V1457H0v-240.23z"

72+ , fill: "url(#j)"

73+ }

74+ , SVG.path

75+ { fillRule: "evenodd"

76+ , clipRule: "evenodd"

77+ , d: "m0 1315 40 13.4c40 13.41 120 40.21 200 58.08 80 17.87 160 26.81 240 13.41 80-13.41 160-49.15 240-35.75 80 13.41 160 75.96 240 89.36 80 13.4 160-22.34 200-40.21l40-17.87V2011H0v-696z"

78+ , fill: "#5C0BC2"

79+ }

80+ , SVG.defs

81+ { children:

82+ [ SVG.linearGradient

83+ { id: "a"

84+ , x1: "600"

85+ , y1: "25.321"

86+ , x2: "600"

87+ , y2: "77.452"

88+ , gradientUnits: "userSpaceOnUse"

89+ , children:

90+ [ SVG.stop

91+ { stopColor: "#FFFAF4"

92+ }

93+ , SVG.stop

94+ { offset: "1"

95+ , stopColor: "#FFFDF7"

96+ }

97+ ]

98+ }

99+ , SVG.linearGradient

100+ { id: "b"

101+ , x1: "600"

102+ , y1: "104"

103+ , x2: "600"

104+ , y2: "372.264"

105+ , gradientUnits: "userSpaceOnUse"

106+ , children:

107+ [ SVG.stop

108+ { stopColor: "#FFE8F4"

109+ }

110+ , SVG.stop

111+ { offset: "0"

112+ , stopColor: "#FFE9E8"

113+ }

114+ , SVG.stop

115+ { offset: "1"

116+ , stopColor: "#FFF0F8"

117+ }

118+ , SVG.stop

119+ { offset: "1"

120+ , stopColor: "#FFF3F0"

121+ }

122+ ]

123+ }

124+ , SVG.linearGradient

125+ { id: "c"

126+ , x1: "600"

127+ , y1: "144"

128+ , x2: "600"

129+ , y2: "528"

130+ , gradientUnits: "userSpaceOnUse"

131+ , children:

132+ [ SVG.stop

133+ { stopColor: "#FFC9E3"

134+ }

135+ , SVG.stop

136+ { offset: "1"

137+ , stopColor: "#FFCAE3"

138+ }

139+ ]

140+ }

141+ , SVG.linearGradient

142+ { id: "d"

143+ , x1: "600"

144+ , y1: "266"

145+ , x2: "600"

146+ , y2: "649"

147+ , gradientUnits: "userSpaceOnUse"

148+ , children:

149+ [ SVG.stop

150+ { stopColor: "#F094E1"

151+ }

152+ , SVG.stop

153+ { offset: "1"

154+ , stopColor: "#FAA4E7"

155+ }

156+ ]

157+ }

158+ , SVG.linearGradient

159+ { id: "e"

160+ , x1: "600"

161+ , y1: "484"

162+ , x2: "600"

163+ , y2: "911"

164+ , gradientUnits: "userSpaceOnUse"

165+ , children:

166+ [ SVG.stop

167+ { stopColor: "#E683FF"

168+ }

169+ , SVG.stop

170+ { offset: "1"

171+ , stopColor: "#FF97F5"

172+ }

173+ ]

174+ }

175+ , SVG.linearGradient

176+ { id: "f"

177+ , x1: "600"

178+ , y1: "649"

179+ , x2: "600"

180+ , y2: "773.08"

181+ , gradientUnits: "userSpaceOnUse"

182+ , children:

183+ [ SVG.stop

184+ { stopColor: "#CC60FF"

185+ }

186+ , SVG.stop

187+ { offset: "1"

188+ , stopColor: "#E062FF"

189+ }

190+ ]

191+ }

192+ , SVG.linearGradient

193+ { id: "g"

194+ , x1: "600"

195+ , y1: "731.658"

196+ , x2: "600"

197+ , y2: "970.014"

198+ , gradientUnits: "userSpaceOnUse"

199+ , children:

200+ [ SVG.stop

201+ { stopColor: "#A32EFF"

202+ }

203+ , SVG.stop

204+ { offset: "1"

205+ , stopColor: "#C03CFF"

206+ }

207+ ]

208+ }

209+ , SVG.linearGradient

210+ { id: "h"

211+ , x1: "600"

212+ , y1: "911"

213+ , x2: "600"

214+ , y2: "1363"

215+ , gradientUnits: "userSpaceOnUse"

216+ , children:

217+ [ SVG.stop

218+ { stopColor: "#8600F0"

219+ }

220+ , SVG.stop

221+ { offset: "1"

222+ , stopColor: "#B659FF"

223+ }

224+ ]

225+ }

226+ , SVG.linearGradient

227+ { id: "i"

228+ , x1: "600"

229+ , y1: "1050"

230+ , x2: "600"

231+ , y2: "1409"

232+ , gradientUnits: "userSpaceOnUse"

233+ , children:

234+ [ SVG.stop

235+ { stopColor: "#CA33FF"

236+ }

237+ , SVG.stop

238+ { offset: "0"

239+ , stopColor: "#7D17FF"

240+ }

241+ , SVG.stop

242+ { offset: "1"

243+ , stopColor: "#843DDE"

244+ }

245+ ]

246+ }

247+ , SVG.linearGradient

248+ { id: "j"

249+ , x1: "600"

250+ , y1: "1362.52"

251+ , x2: "600"

252+ , y2: "1484"

253+ , gradientUnits: "userSpaceOnUse"

254+ , children:

255+ [ SVG.stop

256+ { stopColor: "#6706E3"

257+ }

258+ , SVG.stop

259+ { offset: "1"

260+ , stopColor: "#682DE7"

261+ }

262+ ]

263+ }

264+ ]

265+ }

266+ ]

267+ }

src/Yoga/Block/Icon/SVG/MurmurasLogos.pursnew file+33

@@ -0,0 +1,33 @@

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

3+import React.Basic (JSX)

4+import React.Basic.DOM as R

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

7+murmurasLogos :: JSX

8+murmurasLogos = SVG.svg

9+ { viewBox: "0 0 400 400"

10+ , xmlns: "http://www.w3.org/2000/svg"

11+ , xmlSpace: "preserve"

12+ , style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" }

13+ , children:

14+ [ SVG.path

15+ { style: R.css { fill: "none" }

16+ , d: "M0 0h400v400H0z"

17+ }

18+ , SVG.path

19+ { style: R.css { fill: "#f7f7f7" }

20+ , d: "M0 0h400v400H0z"

21+ }

22+ , SVG.path

23+ { d: "M681.275 65.243a3.897 3.897 0 0 1-2.823-1.219l-3.015-3.199a1.42 1.42 0 0 1-.337-1.362 1.42 1.42 0 0 1 .992-.994l35.69-10.01a.18.18 0 0 0 .067-.307 15.207 15.207 0 0 0-9.76-3.565c-1.368 0-2.732.186-4.057.553a4.045 4.045 0 0 1-4.012-1.12l-17.703-18.796a.165.165 0 0 0-.07-.046l-18.234-6.13a.175.175 0 0 0-.19.275l17.9 22.232a4.03 4.03 0 0 1-.133 5.214l-4.493 5.039c-.673.755-1.57 1.322-2.575 1.442a3.884 3.884 0 0 1-1.867-.232l-3.614-1.393a1.43 1.43 0 0 1-.552-2.284l4.705-5.28a.173.173 0 0 0 .006-.225l-24.694-30.671a4.066 4.066 0 0 1-.165-4.839 4.048 4.048 0 0 1 4.596-1.515l32.881 11.055c.627.21 1.2.575 1.653 1.06l16.797 17.83c.039.042.094.06.15.051a23.236 23.236 0 0 1 22.933 9.964l1.063 1.58a4.042 4.042 0 0 1 .443 3.643 4.05 4.05 0 0 1-2.7 2.494l-37.834 10.61a3.87 3.87 0 0 1-1.048.145M660.78 76.944a3.617 3.617 0 0 1-.12 4.676l-11.514 12.92c-.115.13.01.33.176.283l42.295-11.863c.137-.039.176-.221.066-.31a13.046 13.046 0 0 0-8.159-2.88c-1.172 0-2.343.16-3.479.474a3.623 3.623 0 0 1-3.598-1.006l-15.311-16.254a.163.163 0 0 0-.07-.045l-15.29-5.14c-.164-.056-.3.138-.191.273l15.194 18.872h.001zm-22.957 28.48a3.603 3.603 0 0 1-3.07-1.701 3.648 3.648 0 0 1 .37-4.324l17.998-20.195a.174.174 0 0 0 .006-.225l-21.315-26.475a3.646 3.646 0 0 1-.15-4.338 3.63 3.63 0 0 1 4.12-1.36l28.489 9.577a3.62 3.62 0 0 1 1.48.948l14.502 15.395c.038.04.094.059.149.051a20.25 20.25 0 0 1 19.913 8.697l.857 1.27c.282.416.513.873.609 1.365.39 2-.836 3.75-2.569 4.236L638.8 105.29a3.626 3.626 0 0 1-.977.134"

24+ , style: R.css { fill: "#002340", fillRule: "nonzero" }

25+ , transform: "scale(2.22036) rotate(-12.17 512.83 2982.762)"

26+ }

27+ , SVG.path

28+ { d: "M740.866 49.008a4.33 4.33 0 0 1-.14 5.596l-15.206 17.06c-.115.13.01.33.177.283l54.922-15.405a.18.18 0 0 0 .069-.306 16.737 16.737 0 0 0-10.891-4.05c-1.508 0-3.009.205-4.462.608a4.35 4.35 0 0 1-4.306-1.204l-19.398-20.592a.163.163 0 0 0-.07-.045l-20.32-6.832c-.165-.055-.3.138-.191.273l19.816 24.614zm-28.819 35.596a4.31 4.31 0 0 1-3.674-2.037 4.362 4.362 0 0 1 .44-5.175l22.908-25.701a.175.175 0 0 0 .005-.225L704.638 17.82a4.365 4.365 0 0 1-.178-5.191A4.343 4.343 0 0 1 709.39 11l35.999 12.102a4.344 4.344 0 0 1 1.77 1.136L765.59 43.8c.04.041.095.06.151.051a25.347 25.347 0 0 1 25.072 10.863l1.092 1.619c.333.494.607 1.037.722 1.62.47 2.393-.992 4.493-3.072 5.076l-76.34 21.412c-.38.108-.773.162-1.168.162"

29+ , style: R.css { fill: "#002340", fillRule: "nonzero" }

30+ , transform: "scale(2.22036) rotate(-12.17 512.83 2982.762)"

31+ }

32+ ]

33+ }

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

@@ -0,0 +1 @@

1+<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path style="fill:none" d="M0 0h400v400H0z"/><path style="fill:#f7f7f7" d="M0 0h400v400H0z"/><path d="M681.275 65.243a3.897 3.897 0 0 1-2.823-1.219l-3.015-3.199a1.42 1.42 0 0 1-.337-1.362 1.42 1.42 0 0 1 .992-.994l35.69-10.01a.18.18 0 0 0 .067-.307 15.207 15.207 0 0 0-9.76-3.565c-1.368 0-2.732.186-4.057.553a4.045 4.045 0 0 1-4.012-1.12l-17.703-18.796a.165.165 0 0 0-.07-.046l-18.234-6.13a.175.175 0 0 0-.19.275l17.9 22.232a4.03 4.03 0 0 1-.133 5.214l-4.493 5.039c-.673.755-1.57 1.322-2.575 1.442a3.884 3.884 0 0 1-1.867-.232l-3.614-1.393a1.43 1.43 0 0 1-.552-2.284l4.705-5.28a.173.173 0 0 0 .006-.225l-24.694-30.671a4.066 4.066 0 0 1-.165-4.839 4.048 4.048 0 0 1 4.596-1.515l32.881 11.055c.627.21 1.2.575 1.653 1.06l16.797 17.83c.039.042.094.06.15.051a23.236 23.236 0 0 1 22.933 9.964l1.063 1.58a4.042 4.042 0 0 1 .443 3.643 4.05 4.05 0 0 1-2.7 2.494l-37.834 10.61a3.87 3.87 0 0 1-1.048.145M660.78 76.944a3.617 3.617 0 0 1-.12 4.676l-11.514 12.92c-.115.13.01.33.176.283l42.295-11.863c.137-.039.176-.221.066-.31a13.046 13.046 0 0 0-8.159-2.88c-1.172 0-2.343.16-3.479.474a3.623 3.623 0 0 1-3.598-1.006l-15.311-16.254a.163.163 0 0 0-.07-.045l-15.29-5.14c-.164-.056-.3.138-.191.273l15.194 18.872h.001zm-22.957 28.48a3.603 3.603 0 0 1-3.07-1.701 3.648 3.648 0 0 1 .37-4.324l17.998-20.195a.174.174 0 0 0 .006-.225l-21.315-26.475a3.646 3.646 0 0 1-.15-4.338 3.63 3.63 0 0 1 4.12-1.36l28.489 9.577a3.62 3.62 0 0 1 1.48.948l14.502 15.395c.038.04.094.059.149.051a20.25 20.25 0 0 1 19.913 8.697l.857 1.27c.282.416.513.873.609 1.365.39 2-.836 3.75-2.569 4.236L638.8 105.29a3.626 3.626 0 0 1-.977.134" style="fill:#002340;fill-rule:nonzero" transform="rotate(-12.17 1138.667 6622.805) scale(2.22036)"/><path d="M740.866 49.008a4.33 4.33 0 0 1-.14 5.596l-15.206 17.06c-.115.13.01.33.177.283l54.922-15.405a.18.18 0 0 0 .069-.306 16.737 16.737 0 0 0-10.891-4.05c-1.508 0-3.009.205-4.462.608a4.35 4.35 0 0 1-4.306-1.204l-19.398-20.592a.163.163 0 0 0-.07-.045l-20.32-6.832c-.165-.055-.3.138-.191.273l19.816 24.614zm-28.819 35.596a4.31 4.31 0 0 1-3.674-2.037 4.362 4.362 0 0 1 .44-5.175l22.908-25.701a.175.175 0 0 0 .005-.225L704.638 17.82a4.365 4.365 0 0 1-.178-5.191A4.343 4.343 0 0 1 709.39 11l35.999 12.102a4.344 4.344 0 0 1 1.77 1.136L765.59 43.8c.04.041.095.06.151.051a25.347 25.347 0 0 1 25.072 10.863l1.092 1.619c.333.494.607 1.037.722 1.62.47 2.393-.992 4.493-3.072 5.076l-76.34 21.412c-.38.108-.773.162-1.168.162" style="fill:#002340;fill-rule:nonzero" transform="rotate(-12.17 1138.667 6622.805) scale(2.22036)"/></svg>

src/Yoga/Block/Icon/SVG/after.svg+1−1

@@ -1 +1 @@

1−<svg viewBox="0 0 64 44" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M22.2 30.776h19.6v4.17H22.2zM22.2 19.904h19.6v4.17H22.2zM22.2 9.031h19.6v4.172H22.2zM18.2 9.203 6.943 20.46A2.155 2.155 0 0 0 6.308 22c-.001.576.228 1.13.635 1.539L18.2 34.797v-6.162l-6.638-6.644 6.638-6.632V9.203zM45.8 9.203 57.058 20.46c.409.408.639.962.635 1.54a2.178 2.178 0 0 1-.636 1.539L45.8 34.797v-6.162l6.639-6.644-6.639-6.632V9.203z"/></svg>

1+<svg viewBox="0 0 64 44" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M22.2 30.776h19.6v4.17H22.2zm0-10.872h19.6v4.17H22.2zm0-10.873h19.6v4.172H22.2zm-4 .172L6.943 20.46A2.155 2.155 0 0 0 6.308 22c-.001.576.228 1.13.635 1.539L18.2 34.797v-6.162l-6.638-6.644 6.638-6.632V9.203zm27.6 0L57.058 20.46c.409.408.639.962.635 1.54a2.178 2.178 0 0 1-.636 1.539L45.8 34.797v-6.162l6.639-6.644-6.639-6.632V9.203z"/></svg>

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

@@ -0,0 +1 @@

1+<svg width="1200" height="2011" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m0 0 18 4.628c18 4.628 55 13.884 91 18.512s73 4.628 109 6.171c37 1.543 73 4.628 109 7.714 37 3.085 73 6.17 109 10.798 37 4.628 73 10.8 109 9.256 37-1.542 73-10.798 110-18.512 36-7.713 72-13.884 109-12.341 36 1.542 72 10.799 109 12.341 36 1.543 72-4.628 109-10.799 36-6.17 73-12.341 109-9.256 36 3.086 73 15.427 91 21.598l18 6.17V336H0V0z" fill="url(#a)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m1200 236.211-50-4.654c-50-4.655-150-13.965-250-41.895-100-27.929-200-74.478-300-83.788-100-9.31-200 18.619-300 27.929-100 9.31-200 0-250-4.655l-50-4.655V455h1200V236.211z" fill="url(#b)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m0 144 50 32.386c50 32.385 150 97.156 250 106.409s200-37.012 300-41.638c100-4.627 200 32.385 300 50.891s200 18.506 250 18.506h50V528H0V144z" fill="url(#c)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m0 266 33 28.488c34 28.487 100 85.462 167 85.462s133-56.975 200-47.479c67 9.496 133 85.463 200 104.455 67 18.991 133-18.992 200-18.992s133 37.983 200 56.975c67 18.992 133 18.992 167 18.992h33V649H0V266z" fill="url(#d)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m0 503.083 22-3.409c22-3.409 67-10.227 111-13.635 45-3.409 89-3.409 134 6.817 44 10.227 89 30.679 133 34.088 44 3.409 89-10.226 133-13.635 45-3.409 89 3.409 134 27.27 44 23.862 89 64.767 133 68.176 44 3.409 89-30.679 133-44.314 45-13.635 89-6.818 134 6.817 44 13.635 89 34.088 111 44.314l22 10.227V911H0V503.083z" fill="url(#e)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m0 655.221 22-1.901c22-1.901 67-5.703 111-3.802 45 1.901 89 9.505 134 20.911 44 11.405 89 26.613 133 26.613s89-15.208 133-15.208c45 0 89 15.208 134 22.812 44 7.603 89 7.603 133-5.703 44-13.307 89-39.92 133-41.821 45-1.901 89 20.91 134 34.217 44 13.307 89 17.109 111 19.01l22 1.9V968H0V655.221z" fill="url(#f)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m0 848.096 33 8.219c34 8.219 100 24.658 167 20.548 67-4.11 133-28.767 200-45.205C467 815.219 533 807 600 807s133 8.219 200 20.548c67 12.329 133 28.767 200 28.767s133-16.438 167-24.657l33-8.22V1107H0V848.096z" fill="url(#g)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m0 925.667 50 18c50 18 150 54 250 54s200-36 300-60 200-36 300-18 200 66 250 90.003l50 24V1363H0V925.667z" fill="url(#h)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m0 1056.25 25-2.42c25-2.42 75-7.26 125 0s100 26.62 150 38.72c50 12.1 100 16.94 150 14.52 50-2.42 100-12.1 150-16.94 50-4.84 100-4.84 150 2.42s100 21.77 150 36.29 100 29.04 150 26.62c50-2.42 100-21.78 125-31.46l25-9.68V1409H0v-352.75z" fill="url(#i)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1216.77v-8.62c28.5-.02 100 12.03 150 0s100-18.9 150-10.31c50 8.59 100 32.66 150 32.66s100-24.07 150-25.79c50-1.71 100 18.91 150 32.66 50 13.75 100 20.63 150 15.47 50-5.16 100-22.34 150-24.06 50-1.72 100 12.03 125 18.9l25 6.88V1457H0v-240.23z" fill="url(#j)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m0 1315 40 13.4c40 13.41 120 40.21 200 58.08 80 17.87 160 26.81 240 13.41 80-13.41 160-49.15 240-35.75 80 13.41 160 75.96 240 89.36 80 13.4 160-22.34 200-40.21l40-17.87V2011H0v-696z" fill="#5C0BC2"/><defs><linearGradient id="a" x1="600" y1="25.321" x2="600" y2="77.452" gradientUnits="userSpaceOnUse"><stop stop-color="#FFFAF4"/><stop offset="1" stop-color="#FFFDF7"/></linearGradient><linearGradient id="b" x1="600" y1="104" x2="600" y2="372.264" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE8F4"/><stop offset="0" stop-color="#FFE9E8"/><stop offset="1" stop-color="#FFF0F8"/><stop offset="1" stop-color="#FFF3F0"/></linearGradient><linearGradient id="c" x1="600" y1="144" x2="600" y2="528" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC9E3"/><stop offset="1" stop-color="#FFCAE3"/></linearGradient><linearGradient id="d" x1="600" y1="266" x2="600" y2="649" gradientUnits="userSpaceOnUse"><stop stop-color="#F094E1"/><stop offset="1" stop-color="#FAA4E7"/></linearGradient><linearGradient id="e" x1="600" y1="484" x2="600" y2="911" gradientUnits="userSpaceOnUse"><stop stop-color="#E683FF"/><stop offset="1" stop-color="#FF97F5"/></linearGradient><linearGradient id="f" x1="600" y1="649" x2="600" y2="773.08" gradientUnits="userSpaceOnUse"><stop stop-color="#CC60FF"/><stop offset="1" stop-color="#E062FF"/></linearGradient><linearGradient id="g" x1="600" y1="731.658" x2="600" y2="970.014" gradientUnits="userSpaceOnUse"><stop stop-color="#A32EFF"/><stop offset="1" stop-color="#C03CFF"/></linearGradient><linearGradient id="h" x1="600" y1="911" x2="600" y2="1363" gradientUnits="userSpaceOnUse"><stop stop-color="#8600F0"/><stop offset="1" stop-color="#B659FF"/></linearGradient><linearGradient id="i" x1="600" y1="1050" x2="600" y2="1409" gradientUnits="userSpaceOnUse"><stop stop-color="#CA33FF"/><stop offset="0" stop-color="#7D17FF"/><stop offset="1" stop-color="#843DDE"/></linearGradient><linearGradient id="j" x1="600" y1="1362.52" x2="600" y2="1484" gradientUnits="userSpaceOnUse"><stop stop-color="#6706E3"/><stop offset="1" stop-color="#682DE7"/></linearGradient></defs></svg>

src/Yoga/Block/Layout/Switcher/Story.purs+23−7

@@ -13,18 +13,18 @@ import React.Basic.Emotion as E

1313import Yoga (el)

1414

1515default ∷

16− { decorators ∷ Array (Effect JSX -> JSX)

16+ { decorators ∷ Array (Effect JSX → JSX)

1717 , title ∷ String

1818 }

1919default =

2020 { title: "Layout/Switcher"

2121 , decorators:

22− [ \storyFn ->

23− R.div_

24− [ element E.global { styles: Styles.global }

25− , unsafePerformEffect storyFn

26− ]

27− ]

22+ [ \storyFn →

23+ R.div_

24+ [ element E.global { styles: Styles.global }

25+ , unsafePerformEffect storyFn

26+ ]

27+ ]

2828 }

2929

3030switcher ∷ Effect JSX

@@ -57,5 +57,21 @@ switcher =

5757 `power`

5858 5

5959 ]

60+ , R.h2_ [ R.text "With some space" ]

61+ , el Switcher.component

62+ { style: css { backgroundColor: "darkslateblue" }

63+ , threshold: "1000px"

64+ , space: "30px"

65+ }

66+ [ R.div

67+ { children: [ R.text "A child" ]

68+ , style:

69+ css

70+ { backgroundColor: "teal"

71+ }

72+ }

73+ `power`

74+ 5

75+ ]

6076 ]

6177 ]

src/Yoga/Block/Layout/Switcher/Style.purs+22−24

@@ -5,22 +5,20 @@ import Data.Interpolate (i)

55import Foreign.Object as Object

66import Unsafe.Coerce (unsafeCoerce)

8−type Props :: forall k. (Type -> k) -> Row k -> Row k

9−type Props f r =

10− ( css ∷ f Style

11− , space ∷ f String

12− , threshold ∷ f String

13− , limit ∷ f Int

14− | r

15− )

16−

17−switcher ∷ ∀ p. { | Props OptionalProp p } -> Style

8+type Props ∷ ∀ k. (Type → k) → Row k → Row k

9+type Props f r

10+ = ( css ∷ f Style

11+ , space ∷ f String

12+ , threshold ∷ f String

13+ , limit ∷ f Int

14+ | r

15+ )

16+

17+switcher ∷ ∀ p. { | Props OptionalProp p } → Style

1818switcher props = styles <>? props.css

1919 where

2020 limit = props.limit ?|| 4

21−

22− space = (props.space <#> \s -> if s == "0" then "0px" else s) ?|| "var(--s1)"

23−

21+ space = (props.space <#> \s → if s == "0" then "0px" else s) ?|| "var(--s1)"

2422 threshold = props.threshold ?|| "60ch"

2523

2624 lastKey ∷ String

@@ -39,16 +37,16 @@ switcher props = styles <>? props.css

3937 nthLastChild

4038 <> css

4139 { "& > *":

42− nest

43− { display: flex

44− , flexWrap: wrap

45− , margin: i "calc((" space " / 2) * -1)" # str

46− }

40+ nest

41+ { display: flex

42+ , flexWrap: wrap

43+ , margin: i "calc((" space " / 2) * -1)" # str

44+ }

4745 , "& > * > *":

48− nest

49− { flexGrow: str "1"

50− , flexBasis:

51− i "calc((" threshold " - (100% - var(--s1))) * 999)" # str

52− , margin: "calc((" <> space <> "/ 2)" # str

53− }

46+ nest

47+ { flexGrow: str "1"

48+ , flexBasis:

49+ i "calc((" threshold " - (100% - " space ")) * 999)" # str

50+ , margin: "calc(" <> space <> " / 2)" # str

51+ }

5452 }