mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
great new editor!
This commit is contained in:
muerwre
parent
819e988a2e
commit
712a3cbb77
4 changed files with 103 additions and 15 deletions
|
|
@ -31,23 +31,21 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
// box-shadow: transparentize(#E933A5, 0.6) 0 2px 8px;
|
||||
box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
|
||||
filter: grayscale(0);
|
||||
|
||||
transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
|
||||
opacity: 0.8;
|
||||
|
||||
@include outer_shadow();
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
box-shadow: transparentize(#e933a5, 0.4) 0 2px 8px;
|
||||
|
||||
&:global(.disabled) {
|
||||
box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ import {Padder} from "~/components/containers/Padder";
|
|||
import {Group} from "~/components/containers/Group";
|
||||
import {InputText} from "~/components/input/InputText";
|
||||
import {Button} from "~/components/input/Button";
|
||||
import {Filler} from "~/components/containers/Filler";
|
||||
import {Icon} from "~/components/input/Icon";
|
||||
import {CellGrid} from "~/components/containers/CellGrid";
|
||||
|
||||
interface IProps {}
|
||||
|
||||
|
|
@ -12,14 +15,39 @@ const HorizontalExample: FC<IProps> = () => (
|
|||
<div className={styles.wrap}>
|
||||
<Card seamless className={styles.card}>
|
||||
<div className={styles.editor}>
|
||||
<Padder className={styles.uploads}>
|
||||
<CellGrid size={150}>
|
||||
<div className={styles.cell} />
|
||||
</CellGrid>
|
||||
</Padder>
|
||||
|
||||
<Padder className={styles.features}>
|
||||
<Group horizontal>
|
||||
<div className={styles.feature_add_btn}>
|
||||
<Icon icon="plus" />
|
||||
</div>
|
||||
|
||||
<div className={styles.feature}>
|
||||
<Group horizontal>
|
||||
<div>ОБЛОЖКА</div>
|
||||
<Icon icon="close" />
|
||||
</Group>
|
||||
</div>
|
||||
|
||||
<Filler />
|
||||
|
||||
<div className={styles.feature_cell}>
|
||||
<Icon icon="cell-single" size={24} />
|
||||
</div>
|
||||
</Group>
|
||||
</Padder>
|
||||
</div>
|
||||
|
||||
<Padder className={styles.panel}>
|
||||
<Group horizontal>
|
||||
<InputText title="Название" />
|
||||
|
||||
<Button title="Сохранить" iconRight="play" />
|
||||
<Button title="Сохранить" iconRight="check" />
|
||||
</Group>
|
||||
</Padder>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -11,12 +11,14 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: darken($content_bg, 4%);
|
||||
}
|
||||
|
||||
.editor {
|
||||
background: $content_bg;
|
||||
min-height: 200px;
|
||||
min-width: 50vw;
|
||||
background: darken($content_bg, 4%);
|
||||
|
||||
border-radius: $radius;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
|
@ -27,4 +29,50 @@
|
|||
}
|
||||
|
||||
.panel {
|
||||
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.feature_add_btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 24px;
|
||||
background: $red_gradient;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.feature {
|
||||
background: lighten($content_bg, 4%);
|
||||
padding: $gap $gap $gap 20px;
|
||||
border-radius: 24px;
|
||||
font: $font_14_semibold;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.feature_cell {
|
||||
background: lighten($content_bg, 4%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
box-sizing: border-box;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.uploads {
|
||||
flex: 1;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cell {
|
||||
background: lighten($content_bg, 6%);
|
||||
border-radius: $radius;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,46 @@
|
|||
import React, {FC} from 'react';
|
||||
|
||||
const Sprites: FC<{}> = () => (
|
||||
<svg width={0} height={0} viewBox="0 0 20 20">
|
||||
<g id="cell-single" stroke="none">
|
||||
<path d="M0,0 L9,0 L9,9 L0,9 L0,0 Z M1,1 L1,8 L8,8 L8,1 L1,1 Z"></path>
|
||||
<svg width={0} height={0} viewBox="0 0 24 24">
|
||||
<g id="cell-single" stroke="none" transform="translate(2 2)">
|
||||
<path d="M0,0 L9,0 L9,9 L0,9 L0,0 Z"></path>
|
||||
<path d="M11,0 L20,0 L20,9 L11,9 L11,0 Z M12,1 L12,8 L19,8 L19,1 L12,1 Z"></path>
|
||||
<path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"></path>
|
||||
<path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>
|
||||
<path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>
|
||||
</g>
|
||||
|
||||
<g id="cell-double-h" stroke="none">
|
||||
<path d="M0,0 L20,0 L20,9 L0,9 L0,0 Z M1,1 L1,8 L19,8 L19,1 L1,1 Z"></path>
|
||||
<path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"></path>
|
||||
<path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>
|
||||
<path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"/>
|
||||
<path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>
|
||||
</g>
|
||||
|
||||
<g id="cell-double-v" stroke="none">
|
||||
<path d="M0,0 L20,0 L20,9 L0,9 L0,0 Z M1,1 L1,8 L19,8 L19,1 L1,1 Z"></path>
|
||||
<path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"></path>
|
||||
<path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>
|
||||
<path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>
|
||||
</g>
|
||||
|
||||
<g id="play">
|
||||
<path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="plus" stroke="none">
|
||||
<path fill="none" d="M0 0h24v24H0V0z"/>
|
||||
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
|
||||
</g>
|
||||
|
||||
<g id="close" stroke="none">
|
||||
<path fill="none" d="M0 0h24v24H0V0z"/>
|
||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
|
||||
</g>
|
||||
|
||||
<g id="check" stroke="none">
|
||||
<path fill="none" d="M0 0h24v24H0V0z"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export { Sprites };
|
||||
|
||||
// <path d="M0 0H8V8H-8V-8Z" fillRule="evenodd" />
|
||||
// <path d="M0 0H8V8H-8V-8Z" fillRule="evenodd" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue