mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-11 21:38:06 +03:00
Improve input borders a bit
This commit is contained in:
parent
6ea837a554
commit
49ca378f51
@ -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 "🌭"
|
||||
}
|
||||
]
|
||||
|
@ -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
|
||||
|
@ -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
196
src/Yoga/Block/Icon/SVG/Spinner.purs
Normal 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
1
src/Yoga/Block/Icon/SVG/spinner.svg
Normal 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>
|
After Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in New Issue
Block a user