git.iko.soy/rowtype-yoga/purescript-fahrtwind
on main help sign in
Port all relevant plumage files
commitc4cc6ca7209d9012f8a33b27eae5a550d9fcb44a authorMark Eibes <mark.eibes@gmail.com> dateSun 5 Jun 2022, 15:17 (4 years ago) parent192b29f
4 files changed+108−3
spago.dhall−3 src/Fahrtwind.purs+11 src/Fahrtwind/Animation.purs+51 src/Fahrtwind/Layer.purs+46
spago.dhall−3
@@ -14,12 +14,9 @@ to generate this file without the comments in this block.
1414, dependencies =
1515 [ "arrays"
1616 , "colors"
17− , "console"
18− , "effect"
1917 , "foreign-object"
2018 , "integers"
2119 , "prelude"
22− , "psci-support"
2320 , "react-basic"
2421 , "react-basic-dom"
2522 , "react-basic-emotion"
src/Fahrtwind.pursnew file+11
@@ -0,0 +1,11 @@
1+module Fahrtwind
2+ ( module Fahrtwind.Animation
3+ , module Fahrtwind.Layer
4+ , module Fahrtwind.Style.PseudoElements
5+ , module Fahrtwind.Style
6+ ) where
7+
8+import Fahrtwind.Animation (fadeInAndOutAnimationName, headShakeAnimationName, infiniteSpinAnimation, scaleAnimationName, spinAnimationName)
9+import Fahrtwind.Layer (base, basePopper, level3, level3Popper, level4, level4Popper, level5, level5Popper, notification, notificationPopper, overlay, overlayPopper, topmost, zIndex)
10+import Fahrtwind.Style.PseudoElements (afterElement, beforeElement, content, firstLetter, firstLine, selection)
11+import Fahrtwind.Style (BlendMode(..), TailwindColor, acceptClicks, active, afterElement, alignSelfCenter, alignSelfEnd, alignSelfStart, amber, attributeValueStyle, background, background', backgroundBlendMode, backgroundImage, backgroundImage', backgroundNoRepeat, backgroundPosition, backgroundRepeat, backgroundRepeatX, backgroundRepeatY, backgroundSize, backgroundSize', beforeElement, black, blendModeToStyleProperty, block, blue, blueGray, blurredBackground, blurredBackground', border, borderBottom, borderCol, borderCol', borderLeft, borderNone, borderRight, borderSolid, borderTop, bottom, bottom', boxSizingBorderBox, boxSizingContentBox, checked, content, coolGray, cursorAuto, cursorDefault, cursorHelp, cursorMove, cursorNotAllowed, cursorPointer, cursorText, cursorWait, cyan, default, disabled, displayGrid, displayNone, divideCol, divideX, divideXReverse, divideY, divideYReverse, emerald, empty, enabled, evenChild, first, firstChild, firstLetter, firstLine, firstOfType, flex, flexCol, flexGrow, flexNoWrap, flexRow, flexShrink, flexWrap, flexWrapReverse, focus, focusWithin, fontBlack, fontBold, fontExtrabold, fontExtralight, fontFamilyOrMono, fontFamilyOrSans, fontFamilyOrSerif, fontLight, fontMedium, fontNormal, fontSemiMedium, fontSemibold, fontSize, fontSize', fontThin, fuchsia, full, fullscreen, gap, globalStyles, gray, green, height, height', heightFull, heightScreen, hover, hue, ignoreClicks, inRange, indeterminate, indigo, inlineBlock, inlineFlex, inlineGrid, invalid, invisible, isolate, isolationAuto, itemsAround, itemsBetween, itemsCenter, itemsEnd, itemsEvenly, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifySelfCenter, justifySelfEnd, justifySelfStart, justifyStart, lastChild, lastOfType, left, left', lightBlue, lightness, lime, lineHeight, lineHeight', linearGradient, linearGradientStops, linearGradientStopsString, linearGradientString, link, m', mB, mB', mL, mL', mR, mR', mT, mT', mX, mX', mXAuto, mXY, mY, mY', maxHeight, maxHeight', maxWidth, maxWidth', minHeight, minHeight', minWidth, minWidth', mixBlendMode, mkRotate, mkShadow, mkTranslate, nest, nthChild, nthOfType, oddChild, onlyChild, onlyOfType, opacity, optional, orange, outOfRange, outlineNone, overflowHidden, overflowScroll, overflowVisible, overflowXHidden, overflowXScroll, overflowYHidden, overflowYScroll, p', pB, pB', pL, pL', pR, pR', pT, pT', pX, pX', pXY, pY, pY', pink, placeholder, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionStatic, positionSticky, pseudoLeft, pseudoRight, purple, readOnly, readWrite, red, required, right, right', root, rose, rotate, rounded, rounded2xl, rounded3xl, roundedDefault, roundedFull, roundedLg, roundedMd, roundedNone, roundedSm, roundedXl, saturation, scope, screen2xl, screenHeight, screenLg, screenMd, screenSm, screenWidth, screenXl, selection, shadow, shadow', shadowDefault, shadowDefaultCol, shadowLg, shadowLgCol, shadowMd, shadowMdCol, shadowSm, shadowSmCol, shadowXl, shadowXlCol, shadowXxl, shadowXxlCol, shadows, svgBackgroundImage, target, teal, templateCols, templateRows, text2xl, text3xl, text4xl, text5xl, text6xl, text7xl, text8xl, text9xl, textBase, textCenter, textCol, textCol', textDefault, textJustify, textLeft, textLg, textOverflowEllipsis, textRight, textSized, textSm, textTransformUppercase, textXl, textXs, top, top', tracking, trackingNormal, trackingTight, trackingTighter, trackingWide, trackingWider, trackingWidest, transform, transform', transformMany, transition, transition', transitionRec, translate, trueGray, underline, userSelectNone, userSelectText, valid, variables, violet, visible, visited, warmGray, white, width, width', widthAndHeight, widthAndHeight', widthFull, widthScreen, withAlpha, withHue, withLightness, withSaturation, yellow)
src/Fahrtwind/Animation.pursnew file+51
@@ -0,0 +1,51 @@
1+module Fahrtwind.Animation where
2+
3+import React.Basic.Emotion (Style, StyleProperty)
4+import React.Basic.Emotion as E
5+
6+infiniteSpinAnimation ∷ Style
7+infiniteSpinAnimation =
8+ E.css
9+ { animation: E.str "spin 1.3s linear infinite"
10+ , animationName: spinAnimationName
11+ , transformOrigin: E.px 12
12+ }
13+
14+spinAnimationName ∷ StyleProperty
15+spinAnimationName =
16+ E.keyframes
17+ { "0%": E.css { transform: E.str "rotate(150deg)" }
18+ , "100%": E.css { transform: E.str "rotate(510deg)" }
19+ }
20+
21+scaleAnimationName ∷ StyleProperty
22+scaleAnimationName =
23+ E.keyframes
24+ { "0%": E.css { transform: E.str "scale(0)" }
25+ , "10%": E.css { transform: E.str "scale(0.9)" }
26+ , "30%": E.css { transform: E.str "scale(1.12)" }
27+ , "40%": E.css { transform: E.str "scale(0.97)" }
28+ , "55%": E.css { transform: E.str "scale(1.05)" }
29+ , "70%": E.css { transform: E.str "scale(0.997)" }
30+ , "80%": E.css { transform: E.str "scale(1.02)" }
31+ , "100%": E.css { transform: E.str "scale(1)" }
32+ }
33+
34+fadeInAndOutAnimationName ∷ StyleProperty
35+fadeInAndOutAnimationName =
36+ E.keyframes
37+ { "0%": E.css { opacity: E.str "1" }
38+ , "50%": E.css { opacity: E.str "0.8" }
39+ , "100%": E.css { opacity: E.str "1" }
40+ }
41+
42+headShakeAnimationName ∷ StyleProperty
43+headShakeAnimationName =
44+ E.keyframes
45+ { "0%": E.css { transform: E.str "translateX(0)" }
46+ , "6.5%": E.css { transform: E.str " translateX(-6px) rotateY(-9deg)" }
47+ , "18.5%": E.css { transform: E.str " translateX(5px) rotateY(7deg)" }
48+ , "31.5%": E.css { transform: E.str " translateX(-3px) rotateY(-5deg)" }
49+ , "43.5%": E.css { transform: E.str " translateX(2px) rotateY(3deg)" }
50+ , "50%": E.css { transform: E.str "translateX(0)" }
51+ }
src/Fahrtwind/Layer.pursnew file+46
@@ -0,0 +1,46 @@
1+module Fahrtwind.Layer where
2+
3+import Prelude
4+import React.Basic.Emotion (Style, css, str)
5+
6+zIndex ∷ Int -> Style
7+zIndex n = css { zIndex: str (show n) }
8+
9+base ∷ Style
10+base = zIndex 0
11+
12+basePopper ∷ Style
13+basePopper = zIndex 5
14+
15+overlay ∷ Style
16+overlay = zIndex 10
17+
18+overlayPopper ∷ Style
19+overlayPopper = zIndex 15
20+
21+level3 ∷ Style
22+level3 = zIndex 20
23+
24+level3Popper ∷ Style
25+level3Popper = zIndex 25
26+
27+level4 ∷ Style
28+level4 = zIndex 30
29+
30+level4Popper ∷ Style
31+level4Popper = zIndex 35
32+
33+level5 ∷ Style
34+level5 = zIndex 30
35+
36+level5Popper ∷ Style
37+level5Popper = zIndex 35
38+
39+notification ∷ Style
40+notification = zIndex 100
41+
42+notificationPopper ∷ Style
43+notificationPopper = zIndex 105
44+
45+topmost ∷ Style
46+topmost = zIndex 999