mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
fixed inputs
This commit is contained in:
Fedor Katurov
parent
6e89271ea9
commit
811e14fd4c
29 changed files with 566 additions and 901 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import React, { FC } from 'react';
|
||||
import React, { FC, useState } from 'react';
|
||||
import { Card } from '~/components/containers/Card';
|
||||
import styles from './styles.module.scss';
|
||||
import markdown from '~/styles/common/markdown.module.scss';
|
||||
|
|
@ -8,53 +8,59 @@ import { InputText } from '~/components/input/InputText';
|
|||
|
||||
interface IProps {}
|
||||
|
||||
const BorisUIDemo: FC<IProps> = () => (
|
||||
<Card className={styles.card}>
|
||||
<div className={markdown.wrapper}>
|
||||
<h1>UI</h1>
|
||||
<p>
|
||||
Простая демонстрация элементов интерфейса. Используется, в основном, как подсказка при
|
||||
разработке
|
||||
</p>
|
||||
const BorisUIDemo: FC<IProps> = () => {
|
||||
const [text, setText] = useState('');
|
||||
|
||||
<h2>Инпуты</h2>
|
||||
return (
|
||||
<Card className={styles.card}>
|
||||
<div className={markdown.wrapper}>
|
||||
<h1>UI</h1>
|
||||
<p>
|
||||
Простая демонстрация элементов интерфейса. Используется, в основном, как подсказка при
|
||||
разработке
|
||||
</p>
|
||||
|
||||
<form autoComplete="off">
|
||||
<InputText title="Обычный инпут" />
|
||||
<InputText title="Инпут с ошибкой" error="Ошибка" />
|
||||
<InputText title="Пароль" type="password" />
|
||||
</form>
|
||||
<h2>Инпуты</h2>
|
||||
|
||||
<h2>Кнопки</h2>
|
||||
<form autoComplete="off">
|
||||
<Group>
|
||||
<InputText title="Обычный инпут" handler={setText} value={text} />
|
||||
<InputText title="Инпут с ошибкой" error="Ошибка" handler={setText} value={text} />
|
||||
<InputText title="Пароль" type="password" handler={setText} value={text} />
|
||||
</Group>
|
||||
</form>
|
||||
|
||||
<h4>Цвета</h4>
|
||||
<h2>Кнопки</h2>
|
||||
|
||||
<Group horizontal className={styles.sample}>
|
||||
<Button>Primary</Button>
|
||||
<Button color="secondary">Secondary</Button>
|
||||
<Button color="outline">Outline</Button>
|
||||
<Button color="gray">Gray</Button>
|
||||
<Button color="link">Link</Button>
|
||||
</Group>
|
||||
<h4>Цвета</h4>
|
||||
|
||||
<h4>Размеры</h4>
|
||||
<Group horizontal className={styles.sample}>
|
||||
<Button>Primary</Button>
|
||||
<Button color="secondary">Secondary</Button>
|
||||
<Button color="outline">Outline</Button>
|
||||
<Button color="gray">Gray</Button>
|
||||
<Button color="link">Link</Button>
|
||||
</Group>
|
||||
|
||||
<Group horizontal className={styles.sample}>
|
||||
<Button size="micro">Micro</Button>
|
||||
<Button size="mini">Mini</Button>
|
||||
<Button size="normal">Normal</Button>
|
||||
<Button size="big">Big</Button>
|
||||
<Button size="giant">Giant</Button>
|
||||
</Group>
|
||||
<h4>Размеры</h4>
|
||||
|
||||
<h4>Варианты</h4>
|
||||
<Group horizontal className={styles.sample}>
|
||||
<Button iconRight="check">iconRight</Button>
|
||||
<Button iconLeft="send">iconLeft</Button>
|
||||
<Button round>Round</Button>
|
||||
</Group>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
<Group horizontal className={styles.sample}>
|
||||
<Button size="micro">Micro</Button>
|
||||
<Button size="mini">Mini</Button>
|
||||
<Button size="normal">Normal</Button>
|
||||
<Button size="big">Big</Button>
|
||||
<Button size="giant">Giant</Button>
|
||||
</Group>
|
||||
|
||||
<h4>Варианты</h4>
|
||||
<Group horizontal className={styles.sample}>
|
||||
<Button iconRight="check">iconRight</Button>
|
||||
<Button iconLeft="send">iconLeft</Button>
|
||||
<Button round>Round</Button>
|
||||
</Group>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export { BorisUIDemo };
|
||||
|
|
|
|||
|
|
@ -27,8 +27,7 @@ const LocalCommentFormTextarea: FC<IProps> = ({ setRef }) => {
|
|||
onKeyDown={onKeyDown}
|
||||
disabled={isSubmitting}
|
||||
placeholder={placeholder}
|
||||
minRows={2}
|
||||
setRef={setRef}
|
||||
ref={setRef}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { InputText } from '~/components/input/InputText';
|
|||
import { Button } from '~/components/input/Button';
|
||||
import { Padder } from '~/components/containers/Padder';
|
||||
import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
|
||||
import { Filler } from '~/components/containers/Filler';
|
||||
|
||||
const EditorButtons: FC = () => {
|
||||
const { values, handleChange, isSubmitting } = useNodeFormContext();
|
||||
|
|
@ -14,14 +15,16 @@ const EditorButtons: FC = () => {
|
|||
<EditorActionsPanel />
|
||||
|
||||
<Group horizontal>
|
||||
<InputText
|
||||
title="Название"
|
||||
value={values.title}
|
||||
handler={handleChange('title')}
|
||||
autoFocus
|
||||
maxLength={256}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<Filler>
|
||||
<InputText
|
||||
title="Название"
|
||||
value={values.title}
|
||||
handler={handleChange('title')}
|
||||
autoFocus
|
||||
maxLength={256}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</Filler>
|
||||
|
||||
<Button
|
||||
title="Сохранить"
|
||||
|
|
|
|||
|
|
@ -4,11 +4,13 @@ import { Textarea } from '~/components/input/Textarea';
|
|||
import { path } from 'ramda';
|
||||
import { NodeEditorProps } from '~/types/node';
|
||||
import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
|
||||
import { useRandomPhrase } from '~/constants/phrases';
|
||||
|
||||
type IProps = NodeEditorProps & {};
|
||||
|
||||
const TextEditor: FC<IProps> = () => {
|
||||
const { values, setFieldValue } = useNodeFormContext();
|
||||
const placeholder = useRandomPhrase('SIMPLE');
|
||||
|
||||
const setText = useCallback((text: string) => setFieldValue('blocks', [{ type: 'text', text }]), [
|
||||
setFieldValue,
|
||||
|
|
@ -18,7 +20,7 @@ const TextEditor: FC<IProps> = () => {
|
|||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<Textarea value={text} handler={setText} minRows={6} />
|
||||
<Textarea value={text} handler={setText} minRows={6} placeholder={placeholder} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
margin: 0;
|
||||
|
||||
background: $button_bg_color;
|
||||
border-radius: $input_radius;
|
||||
border-radius: $radius;
|
||||
|
||||
fill: white;
|
||||
stroke: white;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
box-shadow: transparentize($color: #000000, $amount: 0.1) 1px 0;
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $input_radius $input_radius 0;
|
||||
border-radius: 0 $radius $radius 0;
|
||||
|
||||
&.small {
|
||||
border-radius: 0 3px 3px 0;
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: $input_radius 0 0 $input_radius;
|
||||
border-radius: $radius 0 0 $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.container {
|
||||
min-height: $info_height;
|
||||
border-radius: $input_radius;
|
||||
border-radius: $radius;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -26,4 +26,3 @@
|
|||
background: transparentize($red, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +1,24 @@
|
|||
import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';
|
||||
import React, { ChangeEvent, FC, useCallback, useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import styles from '~/styles/common/inputs.module.scss';
|
||||
import { Icon } from '~/components/input/Icon';
|
||||
import { IInputTextProps } from '~/redux/types';
|
||||
import { LoaderCircle } from '~/components/input/LoaderCircle';
|
||||
import { useTranslatedError } from '~/hooks/data/useTranslatedError';
|
||||
import { InputWrapper } from '~/components/input/InputWrapper';
|
||||
import styles from './styles.module.scss';
|
||||
import { Icon } from '~/components/input/Icon';
|
||||
import { useFocusEvent } from '~/hooks/dom/useFocusEvent';
|
||||
|
||||
const InputText: FC<IInputTextProps> = ({
|
||||
wrapperClassName,
|
||||
className = '',
|
||||
handler,
|
||||
required = false,
|
||||
status,
|
||||
title,
|
||||
error,
|
||||
value = '',
|
||||
onRef,
|
||||
is_loading,
|
||||
after,
|
||||
suffix,
|
||||
...props
|
||||
}) => {
|
||||
const [focused, setFocused] = useState(false);
|
||||
const [inner_ref, setInnerRef] = useState<HTMLInputElement | null>(null);
|
||||
const { focused, onFocus, onBlur } = useFocusEvent();
|
||||
const [revealed, setRevealed] = useState(false);
|
||||
|
||||
const onInput = useCallback(
|
||||
({ target }: ChangeEvent<HTMLInputElement>) => {
|
||||
|
|
@ -34,69 +31,35 @@ const InputText: FC<IInputTextProps> = ({
|
|||
[handler]
|
||||
);
|
||||
|
||||
const onFocus = useCallback(() => setFocused(true), []);
|
||||
const onBlur = useCallback(() => setFocused(false), []);
|
||||
const toggleRevealed = useCallback(() => setRevealed(!revealed), [setRevealed, revealed]);
|
||||
|
||||
const translatedError = useTranslatedError(error);
|
||||
|
||||
useEffect(() => {
|
||||
if (onRef) onRef(inner_ref);
|
||||
}, [inner_ref, onRef]);
|
||||
const type = props.type === 'password' && revealed ? 'text' : props.type;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.input_text_wrapper, wrapperClassName, {
|
||||
[styles.required]: required,
|
||||
[styles.focused]: focused,
|
||||
[styles.has_status]: !!status || !!error,
|
||||
[styles.has_value]: !!value,
|
||||
[styles.has_error]: !!error,
|
||||
[styles.has_loader]: is_loading,
|
||||
})}
|
||||
>
|
||||
<div className={styles.input}>
|
||||
<InputWrapper title={title} error={translatedError} focused={focused} notEmpty={!!value}>
|
||||
<div className={classNames(styles.input, { [styles.has_error]: !!error })}>
|
||||
<input
|
||||
type="text"
|
||||
onChange={onInput}
|
||||
className={classNames(styles.input_text, className)}
|
||||
{...props}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
type={type}
|
||||
onChange={onInput}
|
||||
className={classNames(styles.input_text, className)}
|
||||
value={value || ''}
|
||||
ref={setInnerRef}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
{(!!suffix || props.type === 'password') && (
|
||||
<div className={styles.suffix}>
|
||||
{suffix}
|
||||
{props.type === 'password' && (
|
||||
<Icon icon="eye" onClick={toggleRevealed} className={styles.reveal} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.status}>
|
||||
<div className={classNames(styles.success_icon, { active: status === 'success' })}>
|
||||
<Icon icon="check" size={20} />
|
||||
</div>
|
||||
|
||||
<div className={classNames(styles.error_icon, { active: status === 'error' || !!error })}>
|
||||
<Icon icon="close" size={20} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.loader}>
|
||||
<div className={classNames({ active: is_loading })}>
|
||||
<LoaderCircle size={20} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{title && (
|
||||
<div className={classNames(styles.title)}>
|
||||
<span>{title}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!!translatedError && (
|
||||
<div className={styles.error}>
|
||||
<span>{translatedError}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!!after && <div className={styles.after}>{after}</div>}
|
||||
</div>
|
||||
</InputWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
39
src/components/input/InputText/styles.module.scss
Normal file
39
src/components/input/InputText/styles.module.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
@import "~/styles/variables";
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
|
||||
&.has_error {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
input {
|
||||
height: $input_height;
|
||||
border: none;
|
||||
flex: 1;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
min-width: 0;
|
||||
background: none;
|
||||
padding: 0 $gap 0 $gap;
|
||||
font: $font_14_semibold;
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.suffix {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $input_grey_color;
|
||||
padding: 0 $gap;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
cursor: pointer;
|
||||
}
|
||||
26
src/components/input/InputWrapper/index.tsx
Normal file
26
src/components/input/InputWrapper/index.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import React, { FC } from 'react';
|
||||
import styles from './styles.module.scss';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface InputWrapperProps {
|
||||
title?: string;
|
||||
error?: string;
|
||||
focused: boolean;
|
||||
notEmpty: boolean;
|
||||
}
|
||||
|
||||
const InputWrapper: FC<InputWrapperProps> = ({ children, notEmpty, title, focused, error }) => (
|
||||
<div
|
||||
className={classNames(styles.content, {
|
||||
[styles.has_error]: !!error,
|
||||
[styles.focused]: focused,
|
||||
[styles.not_empty]: notEmpty,
|
||||
})}
|
||||
>
|
||||
{!!title && <div className={styles.title}>{title}</div>}
|
||||
{children}
|
||||
{!!error && <div className={styles.error}>{error}</div>}
|
||||
</div>
|
||||
);
|
||||
|
||||
export { InputWrapper };
|
||||
62
src/components/input/InputWrapper/styles.module.scss
Normal file
62
src/components/input/InputWrapper/styles.module.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
@import '~/styles/variables';
|
||||
|
||||
.content {
|
||||
@include inner_shadow;
|
||||
|
||||
background: $input_bg_color;
|
||||
min-height: $input_height;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
color: $input_text_color;
|
||||
font: $input_font;
|
||||
|
||||
::placeholder {
|
||||
font: $input_placeholder_font;
|
||||
color: $input-grey_color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.has_error {
|
||||
box-shadow: inset $red 0 0 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
position: absolute;
|
||||
font: $font_12_semibold;
|
||||
padding: 0 $gap / 2;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
background-color: $red;
|
||||
bottom: 0;
|
||||
right: $gap / 2;
|
||||
transform: translate(0, 50%);
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: $gap;
|
||||
left: $gap / 2;
|
||||
padding: 0 $gap / 2;
|
||||
transform: translate(0, 0) scale(1);
|
||||
font: $input_font;
|
||||
transition: transform 0.25s;
|
||||
transform-origin: 0 50%;
|
||||
border-radius: 6px;
|
||||
background-color: $input_bg_color;
|
||||
color: $input_grey_color;
|
||||
text-transform: uppercase;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
||||
.focused &, .not_empty & {
|
||||
transform: translate(0, -100%) scale(0.75);
|
||||
}
|
||||
|
||||
.focused.has_error &, .not_empty.has_error & {
|
||||
color: white;
|
||||
background-color: $red;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,44 +10,35 @@ import React, {
|
|||
} from 'react';
|
||||
import classNames from 'classnames';
|
||||
import autosize from 'autosize';
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
import styles from '~/styles/common/inputs.module.scss';
|
||||
import { Icon } from '../Icon';
|
||||
import { InputWrapper } from '~/components/input/InputWrapper';
|
||||
|
||||
type IProps = DetailedHTMLProps<
|
||||
TextareaHTMLAttributes<HTMLTextAreaElement>,
|
||||
HTMLTextAreaElement
|
||||
> & {
|
||||
value: string;
|
||||
placeholder?: string;
|
||||
rows?: number;
|
||||
className?: string;
|
||||
minRows?: number;
|
||||
maxRows?: number;
|
||||
error?: string;
|
||||
value: string;
|
||||
className?: string;
|
||||
handler: (value: string) => void;
|
||||
required?: boolean;
|
||||
status?: 'error' | 'success' | '';
|
||||
title?: string;
|
||||
seamless?: boolean;
|
||||
setRef?: (r: HTMLTextAreaElement) => void;
|
||||
};
|
||||
|
||||
const Textarea = memo<IProps>(
|
||||
({
|
||||
placeholder,
|
||||
className,
|
||||
error,
|
||||
minRows = 3,
|
||||
maxRows = 30,
|
||||
className,
|
||||
handler,
|
||||
required = false,
|
||||
title = '',
|
||||
status = '',
|
||||
seamless,
|
||||
value,
|
||||
setRef,
|
||||
...props
|
||||
}) => {
|
||||
const [rows, setRows] = useState(minRows || 1);
|
||||
const [focused, setFocused] = useState(false);
|
||||
const ref = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
|
|
@ -60,17 +51,10 @@ const Textarea = memo<IProps>(
|
|||
const onBlur = useCallback(() => setFocused(false), [setFocused]);
|
||||
|
||||
useEffect(() => {
|
||||
const target = ref?.current;
|
||||
if (!target) return;
|
||||
|
||||
autosize(target);
|
||||
|
||||
if (setRef) {
|
||||
setRef(target);
|
||||
}
|
||||
|
||||
return () => autosize.destroy(target);
|
||||
}, [ref, setRef]);
|
||||
if (!ref?.current) return;
|
||||
autosize(ref.current);
|
||||
return () => autosize.destroy(ref.current);
|
||||
}, [ref]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return;
|
||||
|
|
@ -79,48 +63,22 @@ const Textarea = memo<IProps>(
|
|||
}, [value]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.input_text_wrapper, styles.textarea_wrapper, {
|
||||
[styles.required]: required,
|
||||
[styles.focused]: focused,
|
||||
[styles.has_status]: !!status,
|
||||
[styles.has_value]: !!value,
|
||||
[styles.seamless]: !!seamless,
|
||||
})}
|
||||
>
|
||||
<div className={styles.input}>
|
||||
<textarea
|
||||
rows={rows}
|
||||
value={value || ''}
|
||||
placeholder={placeholder}
|
||||
className={classNames(styles.textarea, className)}
|
||||
onChange={onInput}
|
||||
ref={ref}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
style={{
|
||||
// maxHeight: maxRows * 20,
|
||||
minHeight: minRows * 20,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.status}>
|
||||
<div className={classNames({ active: status === 'success' })}>
|
||||
<Icon icon="check" size={20} />
|
||||
</div>
|
||||
<div className={classNames({ active: status === 'error' })}>
|
||||
<Icon icon="hide" size={20} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{title && (
|
||||
<div className={styles.title}>
|
||||
<span>{title}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<InputWrapper title={title} error={error} focused={focused} notEmpty={!!value}>
|
||||
<textarea
|
||||
{...props}
|
||||
style={{
|
||||
...props.style,
|
||||
minHeight: minRows * 20,
|
||||
}}
|
||||
value={value || ''}
|
||||
placeholder={placeholder}
|
||||
className={classNames(styles.textarea, className)}
|
||||
onChange={onInput}
|
||||
ref={ref}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
/>
|
||||
</InputWrapper>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
|
|
|||
12
src/components/input/Textarea/styles.module.scss
Normal file
12
src/components/input/Textarea/styles.module.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@import "~/styles/variables";
|
||||
|
||||
.textarea {
|
||||
background: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: $gap;
|
||||
outline: none;
|
||||
resize: none;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { push as historyPush } from 'connected-react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
|
||||
.user_button {
|
||||
align-items: center;
|
||||
border-radius: $input_radius;
|
||||
border-radius: $radius;
|
||||
font: $font_16_semibold;
|
||||
text-transform: uppercase;
|
||||
flex: 0 !important;
|
||||
|
|
|
|||
|
|
@ -70,7 +70,6 @@ const MessageFormUnconnected: FC<IProps> = ({
|
|||
handler={setText}
|
||||
minRows={1}
|
||||
maxRows={isEditing ? 15 : 5}
|
||||
seamless
|
||||
onKeyDown={onKeyDown}
|
||||
disabled={is_sending_messages}
|
||||
autoFocus
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
.content {
|
||||
@include inner_shadow();
|
||||
background: $input_bg_color;
|
||||
border-radius: $input_radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const FlowStamp: FC<IProps> = ({ isFluid, onToggleLayout }) => {
|
|||
title="Поиск"
|
||||
value={searchText}
|
||||
handler={setSearchText}
|
||||
after={after}
|
||||
suffix={after}
|
||||
onKeyUp={onKeyUp}
|
||||
/>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -79,8 +79,6 @@
|
|||
}
|
||||
|
||||
.search_icon {
|
||||
fill: lighten($content_bg, 8%);
|
||||
stroke: lighten($content_bg, 8%);
|
||||
stroke-width: 0.5;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
|
@ -88,14 +86,8 @@
|
|||
|
||||
.close_icon {
|
||||
cursor: pointer;
|
||||
stroke: white;
|
||||
stroke-width: 0.5;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.25s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.toggles {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useCallback, useState } from 'react';
|
||||
|
||||
export const useFocusEvent = (initialState = false) => {
|
||||
export const useFocusEvent = (initialState = false, delay = 0) => {
|
||||
const [focused, setFocused] = useState(initialState);
|
||||
|
||||
const onFocus = useCallback(
|
||||
|
|
@ -12,7 +12,7 @@ export const useFocusEvent = (initialState = false) => {
|
|||
},
|
||||
[setFocused]
|
||||
);
|
||||
const onBlur = useCallback(() => setTimeout(() => setFocused(false), 300), [setFocused]);
|
||||
const onBlur = useCallback(() => setTimeout(() => setFocused(false), delay), [delay]);
|
||||
|
||||
return { focused, onBlur, onFocus };
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { getSearchResults } from '~/redux/flow/api';
|
|||
import { KeyLoader } from 'swr';
|
||||
import { INode } from '~/redux/types';
|
||||
import { GetSearchResultsRequest } from '~/redux/flow/types';
|
||||
import { COMMENTS_DISPLAY } from '~/constants/node';
|
||||
|
||||
const RESULTS_COUNT = 20;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React, { FC } from 'react';
|
|||
import { FlowLayout } from '~/layouts/FlowLayout';
|
||||
import { useFlow } from '~/hooks/flow/useFlow';
|
||||
import { FlowContextProvider } from '~/utils/context/FlowContextProvider';
|
||||
import { SearchProvider } from '~/utils/providers/SearchProvider';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
interface Props {}
|
||||
|
|
|
|||
|
|
@ -21,18 +21,10 @@ export type IInputTextProps = DetailedHTMLProps<
|
|||
InputHTMLAttributes<HTMLInputElement>,
|
||||
HTMLInputElement
|
||||
> & {
|
||||
wrapperClassName?: string;
|
||||
handler?: (value: string) => void;
|
||||
required?: boolean;
|
||||
title?: string;
|
||||
error?: string;
|
||||
can_negative?: boolean;
|
||||
status?: string;
|
||||
maskChar?: string;
|
||||
mask?: string;
|
||||
onRef?: (ref: any) => void;
|
||||
is_loading?: boolean;
|
||||
after?: ReactElement;
|
||||
suffix?: ReactElement;
|
||||
};
|
||||
|
||||
export type IIcon = string;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
// color 0, 0, 68 is pretty cool, btw
|
||||
// $red: #ff3344;
|
||||
$red: #ff3344;
|
||||
$yellow: #ffd60f;
|
||||
$dark_blue: #592071;
|
||||
$blue: #582cd0;
|
||||
$green: #00d2b9;
|
||||
//$green: #00503c;
|
||||
$olive: #8bc12a;
|
||||
$orange: #ff7549;
|
||||
$grass: #41800d;
|
||||
|
|
@ -46,7 +44,6 @@ $text_small: 14px;
|
|||
$text_big: 20px;
|
||||
$text_sign: 22px;
|
||||
|
||||
$input_bg_color: darken($content_bg, 2%);
|
||||
$button_bg_color: $red_gradient;
|
||||
|
||||
$inset_bg: linear-gradient(135deg, darken($content_bg, 2%), $content_bg);
|
||||
|
|
|
|||
41
src/styles/_fonts.scss
Normal file
41
src/styles/_fonts.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
|
||||
$bold: 700;
|
||||
$semibold: 600;
|
||||
$regular: 400;
|
||||
$medium: 500;
|
||||
$light: 300;
|
||||
$extra_light: 200;
|
||||
|
||||
|
||||
$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
|
||||
$font_48_semibold: $semibold 48px $font;
|
||||
$font_48_bold: $bold 48px $font;
|
||||
$font_32_bold: $bold 32px $font;
|
||||
$font_24_bold: $bold 24px $font;
|
||||
$font_24_semibold: $bold 24px $font;
|
||||
$font_24_medium: $medium 24px $font;
|
||||
$font_24_regular: $regular 24px $font;
|
||||
$font_20_semibold: $bold 24px $font;
|
||||
$font_18_regular: $regular 18px $font;
|
||||
$font_18_extra_light: $extra_light 18px $font;
|
||||
$font_18_semibold: $semibold 18px $font;
|
||||
$font_16_regular: $regular 16px $font;
|
||||
$font_16_semibold: $semibold 16px $font;
|
||||
$font_16_medium: $medium 16px $font;
|
||||
$font_14_regular: $regular 14px $font;
|
||||
$font_14_semibold: $semibold 14px $font;
|
||||
$font_14_medium: $medium 14px $font;
|
||||
$font_12_medium: $medium 12px $font;
|
||||
$font_12_semibold: $semibold 12px $font;
|
||||
$font_12_bold: $bold 12px $font;
|
||||
$font_12_regular: $regular 12px $font;
|
||||
$font_10_regular: $regular 10px $font;
|
||||
$font_10_semibold: $semibold 10px $font;
|
||||
$font_8_regular: $regular 8px $font;
|
||||
$font_8_semibold: $semibold 8px $font;
|
||||
|
||||
$font_cell_title: $font_24_semibold;
|
||||
$font_hero_title: $bold 40px $font;
|
||||
11
src/styles/_inputs.scss
Normal file
11
src/styles/_inputs.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@import "fonts";
|
||||
|
||||
$input_height: 40px;
|
||||
$input_text_color: #bbbbbb;
|
||||
$input_shadow: inset transparentize(white, 0.9) 0 0 0 1px;
|
||||
$input_shadow_error: inset $red 0 0 0 1px;
|
||||
$input_shadow_filled: $input_shadow;
|
||||
$input_font: $font_16_semibold;
|
||||
$input_placeholder_font: $font_16_medium;
|
||||
$input_bg_color: darken($content_bg, 2%);
|
||||
$input_grey_color: #444444;
|
||||
246
src/styles/_mixins.scss
Normal file
246
src/styles/_mixins.scss
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
|
||||
@mixin outer_shadow() {
|
||||
box-shadow:
|
||||
inset transparentize(white, 0.95) 1px 1px,
|
||||
transparentize(black, 0.8) 1px 1px,
|
||||
transparentize(black, 0.6) 0 1px 5px;
|
||||
}
|
||||
|
||||
// same as outer shadow, but higher
|
||||
@mixin dropdown_shadow {
|
||||
box-shadow:
|
||||
inset transparentize(white, 0.95) 1px 1px,
|
||||
transparentize(black, 0.8) 1px 1px,
|
||||
transparentize(black, 0.6) 5px 5px 10px;
|
||||
}
|
||||
|
||||
@mixin row_shadow() {
|
||||
&:not(:last-child) {
|
||||
box-shadow: transparentize(white, 0.95) 0 1px,
|
||||
inset transparentize(black, 0.8) 0 -1px;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin inner_shadow() {
|
||||
box-shadow:
|
||||
inset transparentize(white, 0.95) -1px -1px,
|
||||
inset transparentize(black, 0.9) 1px 1px,
|
||||
inset transparentize(black, 0.9) 0 0 10px;
|
||||
}
|
||||
|
||||
@mixin inner_shadow_active() {
|
||||
@include inner_shadow;
|
||||
transition: background-color 250ms;
|
||||
|
||||
&:hover {
|
||||
background: transparentize(white, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input_shadow() {
|
||||
box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px;
|
||||
}
|
||||
|
||||
@mixin modal_mixin() {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin after_shade($color, $position: relative) {
|
||||
position: $position;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 120px;
|
||||
width: 100%;
|
||||
background: linear-gradient(transparentize($color, 1), $color);
|
||||
border-radius: $radius;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin phone {
|
||||
@media (max-width: 320px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media (max-width: 599px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media (max-width: $content_width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vertical_at_tablet {
|
||||
@media (max-width: 599px) {
|
||||
flex-direction: column !important;
|
||||
|
||||
@content;
|
||||
|
||||
& > * {
|
||||
margin: $gap/2 0 !important;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin can_backdrop {
|
||||
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) {
|
||||
background: transparentize($color, $opacity / 2);
|
||||
|
||||
@include can_backdrop {
|
||||
backdrop-filter: blur($radius);
|
||||
-webkit-backdrop-filter: blur($radius);
|
||||
background: transparentize($color, $opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin title_with_line {
|
||||
font: $font_14_semibold;
|
||||
text-transform: uppercase;
|
||||
color: transparentize(white, 0.3);
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > * {
|
||||
padding-right: $gap;
|
||||
}
|
||||
|
||||
& > :global(.line) {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background: transparentize(white, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin clamp($lines, $line: 1em) {
|
||||
display: -webkit-box;
|
||||
line-clamp: $lines;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin sidebar {
|
||||
@include blur();
|
||||
}
|
||||
|
||||
@mixin sidebar_content(
|
||||
$width: 400px,
|
||||
) {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 $width;
|
||||
max-width: 100vw;
|
||||
position: relative;
|
||||
background: transparentize($content_bg, 0.4);
|
||||
box-shadow: transparentize(white, 0.95) -1px 0;
|
||||
}
|
||||
|
||||
@mixin editor_round_button {
|
||||
width: $upload_button_height;
|
||||
height: $upload_button_height;
|
||||
border-radius: ($upload_button_height / 2) !important;
|
||||
flex: 0 0 $upload_button_height;
|
||||
position: relative;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@mixin lab_gradient {
|
||||
background: linear-gradient(darken($dark_blue, 0%), darken($blue, 30%));
|
||||
}
|
||||
|
||||
@mixin hero_gradient {
|
||||
$color: mix($wisegreen, $content_bg, 30%);
|
||||
background: linear-gradient(170deg, lighten($color, 10%), $color);
|
||||
}
|
||||
|
||||
@mixin flow_grid {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr));
|
||||
grid-auto-rows: $cell;
|
||||
|
||||
grid-auto-flow: row dense;
|
||||
grid-column-gap: $gap;
|
||||
grid-row-gap: $gap;
|
||||
|
||||
@media (max-width: ($cell + 10) * 3) {
|
||||
grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr));
|
||||
grid-auto-rows: $fluid_cell;
|
||||
grid-template-rows: calc(50vw - 10px) $fluid_cell;
|
||||
}
|
||||
|
||||
@media (max-width: $cell_tablet) {
|
||||
grid-template-rows: calc(66vw - 10px) auto $fluid_cell;
|
||||
}
|
||||
|
||||
@media (max-width: $cell_mobile) {
|
||||
// rework stamp, so it will be shown as smaller one on mobiles
|
||||
grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
|
||||
grid-template-rows: calc(80vw - 10px) auto 50vw;
|
||||
grid-auto-rows: 50vw;
|
||||
}
|
||||
|
||||
@media (max-width: ($fluid_cell + 5) * 1.5 + 20) {
|
||||
grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
|
||||
grid-template-rows: calc(80vw - 10px) auto 50vw;
|
||||
grid-auto-rows: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin appear {
|
||||
@keyframes __appear {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
animation: __appear 0.25s forwards;
|
||||
}
|
||||
|
||||
@mixin container {
|
||||
max-width: $content_width + $gap * 8;
|
||||
width: 100%;
|
||||
|
||||
padding-left: $gap * 4;
|
||||
padding-right: $gap * 4;
|
||||
|
||||
@include tablet {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,390 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.input_text_wrapper {
|
||||
position: relative;
|
||||
min-height: 40px;
|
||||
border-radius: $input_radius;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s;
|
||||
z-index: 1;
|
||||
|
||||
@include inner_shadow();
|
||||
background: $input_bg_color;
|
||||
|
||||
:global(.react-datepicker-wrapper) {
|
||||
flex: 1;
|
||||
padding: 0 18px;
|
||||
}
|
||||
|
||||
&.seamless {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.textarea_wrapper {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 0;
|
||||
|
||||
textarea {
|
||||
padding: $gap / 2 $gap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
opacity: 1;
|
||||
// z-index: 999;
|
||||
|
||||
&.has_status .status {
|
||||
flex-basis: 0;
|
||||
|
||||
div {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.select {
|
||||
.title {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: transparentize(white, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
padding: 0 18px;
|
||||
flex: 1 0 0;
|
||||
outline: none;
|
||||
color: white;
|
||||
position: relative;
|
||||
|
||||
//&::before {
|
||||
// content: ' ';
|
||||
// background: linear-gradient(270deg, $input_bg_color $gap, transparentize($input_bg_color, 1));
|
||||
// position: absolute;
|
||||
// width: $gap * 2;
|
||||
// height: $input_height;
|
||||
// top: 1px;
|
||||
// right: 1px;
|
||||
// transform: translateX(0);
|
||||
// transition: transform 0.25s;
|
||||
// border-radius: 0 $input_radius $input_radius 0;
|
||||
// pointer-events: none;
|
||||
// touch-action: none;
|
||||
//}
|
||||
}
|
||||
|
||||
&.required {
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
|
||||
background: $red_gradient;
|
||||
}
|
||||
}
|
||||
|
||||
&.has_loader {
|
||||
&::before {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
|
||||
.loader {
|
||||
flex-basis: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.has_status {
|
||||
&::before {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
&.focused::before {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.status {
|
||||
flex-basis: 40px;
|
||||
}
|
||||
|
||||
.title {
|
||||
// padding-right: 40px;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.title {
|
||||
padding-right: 16px;
|
||||
color: transparentize(white, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.focused.has_status.has_loader {
|
||||
&::before {
|
||||
transform: translateX(-80px);
|
||||
}
|
||||
&.focused::before {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
}
|
||||
|
||||
&.has_error {
|
||||
box-shadow: $input_shadow_error;
|
||||
|
||||
.title {
|
||||
color: transparentize(red, 0.4) !important;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
&.numeric {
|
||||
flex: 0 0 120px;
|
||||
|
||||
.input {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.plus {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0 10px;
|
||||
flex: 0 0 40px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.select {
|
||||
.input {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.value {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.password_revealer {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
user-select: none;
|
||||
color: white;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.25s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.input_text,
|
||||
.textarea {
|
||||
outline: none;
|
||||
border: none;
|
||||
font: $font_16_medium;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
color: white;
|
||||
flex: 1;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
padding: 12px 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.status,
|
||||
.loader {
|
||||
flex: 0 0 0;
|
||||
transition: flex-basis 500ms;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
||||
& > div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: $input_height;
|
||||
height: $input_height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.25s;
|
||||
opacity: 0;
|
||||
|
||||
&:global(.active) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font: $font_16_semibold;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 10px;
|
||||
bottom: auto;
|
||||
padding: 0 4px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
transition: top 0.25s, bottom 0.25s, font 0.25s, color 0.25s;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
color: lighten($content_bg, 10%);
|
||||
text-transform: capitalize;
|
||||
background: $input_bg_color;
|
||||
|
||||
span {
|
||||
font: $font;
|
||||
//background: $input_bg_color;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused .title,
|
||||
&.has_value .title {
|
||||
// font: $font_10_semibold;
|
||||
font-size: 10px;
|
||||
top: -6px;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
&.has_value {
|
||||
//box-shadow: $input_shadow_filled;
|
||||
|
||||
.title {
|
||||
color: transparentize(white, 0.3);
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.title {
|
||||
color: transparentize(white, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
font: $font_12_regular;
|
||||
bottom: -6px;
|
||||
left: 15px;
|
||||
position: absolute;
|
||||
color: $red;
|
||||
|
||||
span {
|
||||
background: $content_bg;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 2px;
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.error_icon {
|
||||
fill: $red;
|
||||
stroke: $red;
|
||||
}
|
||||
|
||||
.success_icon {
|
||||
fill: $green;
|
||||
stroke: $green;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: $input_radius;
|
||||
box-shadow: $input_shadow;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: transparentize($red, 0.8);
|
||||
}
|
||||
|
||||
.option_title {
|
||||
text-transform: capitalize;
|
||||
color: transparentize(black, 0.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.options {
|
||||
.option,
|
||||
.option_title {
|
||||
height: $input_height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.1s;
|
||||
border-radius: $input_radius;
|
||||
}
|
||||
|
||||
.option_title {
|
||||
box-shadow: $input_shadow;
|
||||
border-radius: $input_radius;
|
||||
}
|
||||
}
|
||||
|
||||
.after {
|
||||
width: 24px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 5px;
|
||||
top: -1px;
|
||||
}
|
||||
|
|
@ -1,4 +1,7 @@
|
|||
@import 'colors';
|
||||
@import 'inputs';
|
||||
@import 'fonts';
|
||||
@import 'mixins';
|
||||
|
||||
$header_height: 64px;
|
||||
$cell: 280px;
|
||||
|
|
@ -19,59 +22,16 @@ $bar_height: 64px;
|
|||
$radius: 8px;
|
||||
$cell_radius: $radius;
|
||||
$panel_radius: $radius;
|
||||
$input_radius: $radius;
|
||||
$dialog_radius: $radius * 2;
|
||||
$placeholder_bg: transparentize(white, 0.96);
|
||||
|
||||
$input_height: 36px;
|
||||
$info_height: 24px;
|
||||
$limited_width: 940px;
|
||||
|
||||
$panel_size: 64px;
|
||||
$node_title_height: $panel_size;
|
||||
|
||||
$bold: 700;
|
||||
$semibold: 600;
|
||||
$regular: 400;
|
||||
$medium: 500;
|
||||
$light: 300;
|
||||
$extra_light: 200;
|
||||
|
||||
$upload_button_height: 52px;
|
||||
|
||||
$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
|
||||
$font_48_semibold: $semibold 48px $font;
|
||||
$font_48_bold: $bold 48px $font;
|
||||
$font_32_bold: $bold 32px $font;
|
||||
$font_24_bold: $bold 24px $font;
|
||||
$font_24_semibold: $bold 24px $font;
|
||||
$font_24_medium: $medium 24px $font;
|
||||
$font_24_regular: $regular 24px $font;
|
||||
$font_20_semibold: $bold 24px $font;
|
||||
$font_18_regular: $regular 18px $font;
|
||||
$font_18_extra_light: $extra_light 18px $font;
|
||||
$font_18_semibold: $semibold 18px $font;
|
||||
$font_16_regular: $regular 16px $font;
|
||||
$font_16_semibold: $semibold 16px $font;
|
||||
$font_16_medium: $medium 16px $font;
|
||||
$font_14_regular: $regular 14px $font;
|
||||
$font_14_semibold: $semibold 14px $font;
|
||||
$font_14_medium: $medium 14px $font;
|
||||
$font_12_medium: $medium 12px $font;
|
||||
$font_12_semibold: $semibold 12px $font;
|
||||
$font_12_bold: $bold 12px $font;
|
||||
$font_12_regular: $regular 12px $font;
|
||||
$font_10_regular: $regular 10px $font;
|
||||
$font_10_semibold: $semibold 10px $font;
|
||||
$font_8_regular: $regular 8px $font;
|
||||
$font_8_semibold: $semibold 8px $font;
|
||||
|
||||
$font_cell_title: $font_24_semibold;
|
||||
$font_hero_title: $bold 40px $font;
|
||||
|
||||
$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px;
|
||||
$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 0 1px;
|
||||
|
||||
|
|
@ -80,255 +40,5 @@ $node_shadow: transparentize(black, 0.8) 0 2px, transparentize(black, 0.8) 0 2px
|
|||
|
||||
$tag_height: 26px;
|
||||
|
||||
$input_shadow: inset transparentize(white, 0.9) 0 0 0 1px;
|
||||
$input_shadow_error: inset $red 0 0 0 1px;
|
||||
$input_shadow_filled: $input_shadow;
|
||||
|
||||
$login_dialog_padding: $gap $gap 30px $gap;
|
||||
$sidebar_border: transparentize(white, 0.95);
|
||||
|
||||
@mixin outer_shadow() {
|
||||
box-shadow:
|
||||
inset transparentize(white, 0.95) 1px 1px,
|
||||
transparentize(black, 0.8) 1px 1px,
|
||||
transparentize(black, 0.6) 0 1px 5px;
|
||||
}
|
||||
|
||||
// same as outer shadow, but higher
|
||||
@mixin dropdown_shadow {
|
||||
box-shadow:
|
||||
inset transparentize(white, 0.95) 1px 1px,
|
||||
transparentize(black, 0.8) 1px 1px,
|
||||
transparentize(black, 0.6) 5px 5px 10px;
|
||||
}
|
||||
|
||||
@mixin row_shadow() {
|
||||
&:not(:last-child) {
|
||||
box-shadow: transparentize(white, 0.95) 0 1px,
|
||||
inset transparentize(black, 0.8) 0 -1px;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin inner_shadow() {
|
||||
box-shadow:
|
||||
inset transparentize(white, 0.92) -1px -1px,
|
||||
inset transparentize(black, 0.5) 1px 1px,
|
||||
inset transparentize(black, 0.7) 0 0 10px;
|
||||
}
|
||||
|
||||
@mixin inner_shadow_active() {
|
||||
@include inner_shadow;
|
||||
transition: background-color 250ms;
|
||||
|
||||
&:hover {
|
||||
background: transparentize(white, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input_shadow() {
|
||||
box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px;
|
||||
}
|
||||
|
||||
@mixin modal_mixin() {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin after_shade($color, $position: relative) {
|
||||
position: $position;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 120px;
|
||||
width: 100%;
|
||||
background: linear-gradient(transparentize($color, 1), $color);
|
||||
border-radius: $radius;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin phone {
|
||||
@media (max-width: 320px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media (max-width: 599px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media (max-width: $content_width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vertical_at_tablet {
|
||||
@media (max-width: 599px) {
|
||||
flex-direction: column !important;
|
||||
|
||||
@content;
|
||||
|
||||
& > * {
|
||||
margin: $gap/2 0 !important;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin can_backdrop {
|
||||
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) {
|
||||
background: transparentize($color, $opacity / 2);
|
||||
|
||||
@include can_backdrop {
|
||||
backdrop-filter: blur($radius);
|
||||
-webkit-backdrop-filter: blur($radius);
|
||||
background: transparentize($color, $opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin title_with_line {
|
||||
font: $font_14_semibold;
|
||||
text-transform: uppercase;
|
||||
color: transparentize(white, 0.3);
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > * {
|
||||
padding-right: $gap;
|
||||
}
|
||||
|
||||
& > :global(.line) {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background: transparentize(white, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin clamp($lines, $line: 1em) {
|
||||
display: -webkit-box;
|
||||
line-clamp: $lines;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin sidebar {
|
||||
@include blur();
|
||||
}
|
||||
|
||||
@mixin sidebar_content(
|
||||
$width: 400px,
|
||||
) {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 $width;
|
||||
max-width: 100vw;
|
||||
position: relative;
|
||||
background: transparentize($content_bg, 0.4);
|
||||
box-shadow: transparentize(white, 0.95) -1px 0;
|
||||
}
|
||||
|
||||
@mixin editor_round_button {
|
||||
width: $upload_button_height;
|
||||
height: $upload_button_height;
|
||||
border-radius: ($upload_button_height / 2) !important;
|
||||
flex: 0 0 $upload_button_height;
|
||||
position: relative;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@mixin lab_gradient {
|
||||
background: linear-gradient(darken($dark_blue, 0%), darken($blue, 30%));
|
||||
}
|
||||
|
||||
@mixin hero_gradient {
|
||||
$color: mix($wisegreen, $content_bg, 30%);
|
||||
background: linear-gradient(170deg, lighten($color, 10%), $color);
|
||||
}
|
||||
|
||||
@mixin flow_grid {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr));
|
||||
grid-auto-rows: $cell;
|
||||
|
||||
grid-auto-flow: row dense;
|
||||
grid-column-gap: $gap;
|
||||
grid-row-gap: $gap;
|
||||
|
||||
@media (max-width: ($cell + 10) * 3) {
|
||||
grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr));
|
||||
grid-auto-rows: $fluid_cell;
|
||||
grid-template-rows: calc(50vw - 10px) $fluid_cell;
|
||||
}
|
||||
|
||||
@media (max-width: $cell_tablet) {
|
||||
grid-template-rows: calc(66vw - 10px) auto $fluid_cell;
|
||||
}
|
||||
|
||||
@media (max-width: $cell_mobile) {
|
||||
// rework stamp, so it will be shown as smaller one on mobiles
|
||||
grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
|
||||
grid-template-rows: calc(80vw - 10px) auto 50vw;
|
||||
grid-auto-rows: 50vw;
|
||||
}
|
||||
|
||||
@media (max-width: ($fluid_cell + 5) * 1.5 + 20) {
|
||||
grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
|
||||
grid-template-rows: calc(80vw - 10px) auto 50vw;
|
||||
grid-auto-rows: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin appear {
|
||||
@keyframes __appear {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
animation: __appear 0.25s forwards;
|
||||
}
|
||||
|
||||
@mixin container {
|
||||
max-width: $content_width + $gap * 8;
|
||||
width: 100%;
|
||||
|
||||
padding-left: $gap * 4;
|
||||
padding-right: $gap * 4;
|
||||
|
||||
@include tablet {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue