mirror of
https://github.com/theoludwig/theoludwig.git
synced 2025-05-29 22:37:44 +02:00
chore: usage of prettier, eslint and lint-staged instead of ts-standard
This commit is contained in:
divlo
@ -16,59 +16,60 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.form-group-animation {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.form-group-animation input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 35px;
|
||||
color: var(--color-text-1);
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
}
|
||||
.form-group-animation label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.form-group-animation label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-bottom: 3px solid var(--color-primary);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.label-content {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 0px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.form-group-animation input:focus + .label .label-content,
|
||||
.form-group-animation input:valid + .label .label-content {
|
||||
transform: translateY(-150%);
|
||||
font-size: 14px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.form-group-animation input:focus + .label::after,
|
||||
.form-group-animation input:valid + .label::after {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.form-group-animation {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.form-group-animation input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 35px;
|
||||
color: var(--color-text-1);
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
}
|
||||
.form-group-animation label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.form-group-animation label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-bottom: 3px solid var(--color-primary);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.label-content {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 0px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.form-group-animation input:focus + .label .label-content,
|
||||
.form-group-animation input:valid + .label .label-content {
|
||||
transform: translateY(-150%);
|
||||
font-size: 14px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.form-group-animation input:focus + .label::after,
|
||||
.form-group-animation input:valid + .label::after {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
export const RevealFade: React.FC = props => {
|
||||
export const RevealFade: React.FC = (props) => {
|
||||
const { children } = props
|
||||
|
||||
const htmlElement = useRef<HTMLDivElement>(null)
|
||||
@ -8,7 +8,7 @@ export const RevealFade: React.FC = props => {
|
||||
useEffect(() => {
|
||||
const observer = new window.IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('reveal-visible')
|
||||
observer.unobserve(entry.target)
|
||||
@ -30,19 +30,20 @@ export const RevealFade: React.FC = props => {
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
.reveal-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
transition: all 500ms ease-out 100ms;
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
.reveal-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
transition: all 500ms ease-out 100ms;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -3,8 +3,8 @@ import { forwardRef } from 'react'
|
||||
type SectionHeadingProps = React.ComponentPropsWithRef<'h2'>
|
||||
|
||||
export const SectionHeading = forwardRef<
|
||||
HTMLHeadingElement,
|
||||
SectionHeadingProps
|
||||
HTMLHeadingElement,
|
||||
SectionHeadingProps
|
||||
>((props, ref) => {
|
||||
const { children, ...rest } = props
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
type ShadowContainerProps = React.ComponentPropsWithRef<'div'>
|
||||
|
||||
export const ShadowContainer: React.FC<ShadowContainerProps> = props => {
|
||||
export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
|
||||
const { children, className, ...rest } = props
|
||||
|
||||
return (
|
||||
|
||||
@ -16,22 +16,23 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
<textarea id={name} name={name} ref={ref} {...rest} />
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.form-group {
|
||||
padding-top: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.form-group textarea {
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
resize: vertical;
|
||||
margin-top: 8px;
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.form-group {
|
||||
padding-top: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.form-group textarea {
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
resize: vertical;
|
||||
margin-top: 8px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -3,7 +3,7 @@ interface TooltipProps extends React.ComponentPropsWithRef<'div'> {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export const Tooltip: React.FC<TooltipProps> = props => {
|
||||
export const Tooltip: React.FC<TooltipProps> = (props) => {
|
||||
const { title, children, ...rest } = props
|
||||
return (
|
||||
<>
|
||||
@ -12,37 +12,38 @@ export const Tooltip: React.FC<TooltipProps> = props => {
|
||||
<span className='title'>{title}</span>
|
||||
</span>
|
||||
|
||||
<style jsx>{`
|
||||
.title {
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
background-color: #222222;
|
||||
padding: 5px 8px;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: 10px;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
border-radius: 3px;
|
||||
transition: all 0.15s ease-in;
|
||||
transform: translate3d(0, -15px, 0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.tooltip ~ .tooltip:hover .title,
|
||||
.tooltip:first-child:hover .title {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: all 0.35s ease-out;
|
||||
transform: translate3d(0, 0, 0);
|
||||
margin: 0;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
`}
|
||||
<style jsx>
|
||||
{`
|
||||
.title {
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
background-color: #222222;
|
||||
padding: 5px 8px;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: 10px;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
border-radius: 3px;
|
||||
transition: all 0.15s ease-in;
|
||||
transform: translate3d(0, -15px, 0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.tooltip ~ .tooltip:hover .title,
|
||||
.tooltip:first-child:hover .title {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: all 0.35s ease-out;
|
||||
transform: translate3d(0, 0, 0);
|
||||
margin: 0;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user