rowtype-yoga/ry-blocks
1
0
Fork 0
mirror of https://github.com/rowtype-yoga/ry-blocks.git synced 2024-09-11 21:38:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve input borders a bit

Browse Source
This commit is contained in:
Mark Eibes 2022-06-28 19:55:58 +02:00
parent 6ea837a554
commit 49ca378f51
5 changed files with 239 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Yoga/Block/Atom/Input/Story.purs
View File

@ -62,13 +62,13 @@ input = do
}
]
, Block.box
{ background: colour.backgroundLayer1
{ background: colour.backgroundInverted
}
[ element Input.component
{ label: nes (Proxy ∷ _ "Another background")
, background: colour.backgroundLayer3
-- , background: colour.highlight
, textColour: "blue"
, placeholderColour: colour.backgroundLayer3
, placeholderColour: colour.backgroundInverted
, leading: R.text "🌭"
}
]

21
src/Yoga/Block/Atom/Input/Style.purs
View File

@ -175,20 +175,13 @@ inputContainer props = theCss <>? props.css
css
{ "--left-icon-size": var "--s0"
, "--right-icon-size": str "calc(var(--s0) * 1.2)"
, "--input-border-radius": var "--s-1"
, "--input-side-padding": str "calc(var(--s-1) * 1.2)"
, "--input-top-padding": var "--s-5"
, "--input-bottom-padding": var "--s-5"
, "--border-width": str "1px"
, letterSpacing: em (-0.011)
, position: relative
, cursor: str "text"
, boxSizing: borderBox
, boxShadow: str """
0 1px 1px rgba(200,200,255,0.2),
0 2px 2px rgba(200,200,255,0.1),
0 4px 8px rgba(200,200,255,0.03)"""
, background: str (props.background ?|| colour.inputBackground)
, display: flex
, width: str "calc(var(--s4) * 2)"
, """&[data-invalid="false"]""":
@ -224,6 +217,20 @@ inputContainer props = theCss <>? props.css
, borderRadius: var "--input-border-radius"
}
containerContainer ∷ ∀ r. { | Props OptionalProp r } -> Style
containerContainer props = css { display: grid
, "--border-width": str "1px"
, "--input-border-radius": var "--s-1"
, background: str (props.background ?|| colour.inputBackground)
, boxSizing: contentBox
, borderRadius: var "--input-border-radius"
, boxShadow: str """
0 1px 1px rgba(200,200,255,0.2),
0 2px 2px rgba(200,200,255,0.1),
0 4px 8px rgba(200,200,255,0.03)"""
, border: str $ "var(--border-width) solid " <> colour.inputBorder
}
inputWrapper ∷ Style
inputWrapper =
css

48
src/Yoga/Block/Atom/Input/View/Container.purs
View File

@ -8,6 +8,7 @@ import Foreign.NullOrUndefined (undefined)
import Framer.Motion as M
import Partial.Unsafe (unsafeCrashWith)
import React.Basic.DOM (CSS, css)
import React.Basic.DOM as R
import React.Basic.Emotion (Style)
import React.Basic.Hooks as React
import Unsafe.Coerce (unsafeCoerce)
@ -48,29 +49,30 @@ rawContainer =
let
containerVariants = mkContainerVariants dimensions
containerVariantLabels = mkContainerVariantLabels containerVariants
result =
M.div
</*
( { variants: M.variants containerVariants
, initial: M.initial false
, animate:
M.animate
if props.hasFocus then
containerVariantLabels.focussed
else
containerVariantLabels.blurred
, className: "ry-input-container"
, key: show sizes.innerWidth -- redraw
, css: Style.inputContainer props
, ref
} `unsafeAddProps`
{ "data-invalid":
props.isInvalid
# opToMaybe
# maybe (unsafeCoerce undefined) show
}
)
/> props.children
result = R.div' </* { css: Style.containerContainer props } />
[ M.div
</*
( { variants: M.variants containerVariants
, initial: M.initial false
, animate:
M.animate
if props.hasFocus then
containerVariantLabels.focussed
else
containerVariantLabels.blurred
, className: "ry-input-container"
, key: show sizes.innerWidth -- redraw
, css: Style.inputContainer props
, ref
} `unsafeAddProps`
{ "data-invalid":
props.isInvalid
# opToMaybe
# maybe (unsafeCoerce undefined) show
}
)
/> props.children
]
pure result
drawPathUntil ∷ Int -> Array Point -> String

196
src/Yoga/Block/Icon/SVG/Spinner.purs Normal file
View File

@ -0,0 +1,196 @@
module Yoga.Block.Icon.SVG.Spinner where
import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
spinner :: JSX
spinner = SVG.svg
{ xmlns: "http://www.w3.org/2000/svg"
, style: R.css { margin: "auto", background: "#f1f2f3", display: "block" }
, width: "91"
, height: "91"
, viewBox: "0 0 100 100"
, preserveAspectRatio: "xMidYMid"
, children:
[ SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.8888888888888888s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(40 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.7777777777777778s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(80 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.6666666666666666s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(120 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.5555555555555556s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(160 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.4444444444444444s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(200 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.3333333333333333s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(240 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.2222222222222222s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(280 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.1111111111111111s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(320 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "0s"
, repeatCount: "indefinite"
}
]
}
]
}

1
src/Yoga/Block/Icon/SVG/spinner.svg Normal file
View File

@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB