mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
Добавил тему "Веспера"
This commit is contained in:
muerwre
GitHub
parent
5d34090238
commit
aee4b662d5
148 changed files with 1331 additions and 1338 deletions
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.footer {
|
||||
padding: $gap;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ interface IProps {}
|
|||
|
||||
const LoginSocialRegisterButtons: FC<IProps> = () => (
|
||||
<div className={styles.wrap}>
|
||||
<Button color="secondary">Впустите меня!</Button>
|
||||
<Button>Впустите меня!</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.error_shade {
|
||||
@include outer_shadow();
|
||||
|
|
@ -19,17 +19,17 @@
|
|||
text-transform: uppercase;
|
||||
font: $font_18_semibold;
|
||||
text-align: center;
|
||||
color: $wisegreen;
|
||||
color: $color_primary;
|
||||
|
||||
svg {
|
||||
fill: $wisegreen;
|
||||
fill: $color_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.error_shade {
|
||||
color: $red;
|
||||
color: $color_danger;
|
||||
|
||||
svg {
|
||||
fill: $red;
|
||||
fill: $color_danger;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@ const RestoreSent: VFC<RestoreSentProps> = ({ onClose }) => (
|
|||
|
||||
<div />
|
||||
|
||||
<Button color="secondary" onClick={onClose}>
|
||||
Отлично!
|
||||
</Button>
|
||||
<Button onClick={onClose}>Отлично!</Button>
|
||||
</Group>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.shade {
|
||||
@include outer_shadow();
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
text-transform: uppercase;
|
||||
font: $font_18_semibold;
|
||||
text-align: center;
|
||||
color: $wisegreen;
|
||||
color: $color_primary;
|
||||
|
||||
svg {
|
||||
fill: $wisegreen;
|
||||
fill: $color_primary;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,9 +20,7 @@ const RestoreSuccess: VFC<RestoreSuccessProps> = ({ username, onClick }) => (
|
|||
|
||||
<div />
|
||||
|
||||
<Button color="secondary" onClick={onClick}>
|
||||
Ура!
|
||||
</Button>
|
||||
<Button onClick={onClick}>Ура!</Button>
|
||||
</Group>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.shade {
|
||||
@include outer_shadow();
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
text-transform: uppercase;
|
||||
font: $font_18_semibold;
|
||||
text-align: center;
|
||||
color: $wisegreen;
|
||||
color: $color_primary;
|
||||
|
||||
svg {
|
||||
fill: $wisegreen;
|
||||
fill: $color_primary;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.place {
|
||||
position: relative;
|
||||
|
|
@ -11,11 +11,8 @@
|
|||
@include outer_shadow();
|
||||
display: flex;
|
||||
border-radius: $radius $radius 0 0;
|
||||
// background: $main_gradient;
|
||||
align-items: center;
|
||||
background: lighten($content_bg, 6%);
|
||||
// box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px, inset rgba(255, 255, 255, 0.3) 1px 1px,
|
||||
// inset rgba(0, 0, 0, 0.3) 0 -1px;
|
||||
background: $content_bg_lightest;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -48,7 +45,7 @@
|
|||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: darken(white, 50%);
|
||||
fill: $gray_50;
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -71,7 +68,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
font: $font_14_semibold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -91,7 +88,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: darken(white, 50%);
|
||||
background: $gray_50;
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
opacity: 0.5;
|
||||
|
|
@ -103,7 +100,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: darken(white, 50%);
|
||||
background: $gray_50;
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
position: fixed;
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
background: $red_gradient;
|
||||
background: $flow_gradient;
|
||||
width: $bar_height;
|
||||
height: $bar_height;
|
||||
border-radius: $bar_height * 0.5;
|
||||
|
|
@ -34,12 +34,12 @@
|
|||
}
|
||||
|
||||
.lab & {
|
||||
background: $blue_gradient;
|
||||
background: $info_gradient;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: lighten($content_bg, 4%);
|
||||
background: $content_bg_lighter;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
align-items: center;
|
||||
justify-content: stretch;
|
||||
text-decoration: none;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
padding: $gap;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
padding: $gap * 0.5 0;
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
.time {
|
||||
font: $font_12_regular;
|
||||
line-height: 17px;
|
||||
color: transparentize(white, 0.7)
|
||||
color: $gray_75;
|
||||
}
|
||||
|
||||
.subject {
|
||||
|
|
@ -30,10 +30,10 @@
|
|||
text-transform: uppercase;
|
||||
|
||||
&.open {
|
||||
color: $red;
|
||||
color: $color_offline;
|
||||
}
|
||||
|
||||
&.closed {
|
||||
color: $green;
|
||||
color: $color_online;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: grid;
|
||||
|
|
@ -16,5 +16,5 @@
|
|||
|
||||
.subtitle {
|
||||
font: $font_12_regular;
|
||||
color: transparentize(white, 0.5);
|
||||
color: $gray_50;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ const BorisUIDemo: FC<IProps> = () => {
|
|||
<div className={markdown.wrapper}>
|
||||
<h1>UI</h1>
|
||||
<p>
|
||||
Простая демонстрация элементов интерфейса. Используется, в основном, как подсказка при
|
||||
разработке
|
||||
Простая демонстрация элементов интерфейса. Используется, в основном,
|
||||
как подсказка при разработке
|
||||
</p>
|
||||
|
||||
<h2>Инпуты</h2>
|
||||
|
|
@ -27,8 +27,18 @@ const BorisUIDemo: FC<IProps> = () => {
|
|||
<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} />
|
||||
<InputText
|
||||
title="Инпут с ошибкой"
|
||||
error="Ошибка"
|
||||
handler={setText}
|
||||
value={text}
|
||||
/>
|
||||
<InputText
|
||||
title="Пароль"
|
||||
type="password"
|
||||
handler={setText}
|
||||
value={text}
|
||||
/>
|
||||
</Group>
|
||||
</form>
|
||||
|
||||
|
|
@ -38,7 +48,6 @@ const BorisUIDemo: FC<IProps> = () => {
|
|||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.card {
|
||||
flex: 3;
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 20px 30px;
|
||||
background-color: lighten($content_bg, 4%);
|
||||
background-color: $content_bg_lighter;
|
||||
}
|
||||
|
||||
.sample {
|
||||
|
|
|
|||
|
|
@ -29,15 +29,18 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
|||
(acc, val, index) => [
|
||||
...acc,
|
||||
index === 0
|
||||
? { x: borderGap, y: height - (val / max) * (height - gap * 2) - gap }
|
||||
? {
|
||||
x: borderGap,
|
||||
y: height - (val / max) * (height - gap * 2) - gap,
|
||||
}
|
||||
: {
|
||||
x: ((width - borderGap) / (items.length - 1)) * index,
|
||||
y: height - (val / max) * (height - gap * 2) - gap,
|
||||
},
|
||||
],
|
||||
[]
|
||||
[],
|
||||
),
|
||||
[height, width, items, gap]
|
||||
[height, width, items, gap],
|
||||
);
|
||||
|
||||
if (!points.length) {
|
||||
|
|
@ -49,20 +52,29 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
|||
{...props}
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
viewBox={`0 0 ${width} ${height * 1.05}`}
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<defs>
|
||||
<filter id="f1" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
|
||||
</filter>
|
||||
|
||||
<filter id="brighter">
|
||||
<feComponentTransfer>
|
||||
<feFuncR type="linear" slope="3" />
|
||||
<feFuncG type="linear" slope="3" />
|
||||
<feFuncB type="linear" slope="3" />
|
||||
</feComponentTransfer>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<path
|
||||
d={makeBezierCurve(points)}
|
||||
fill="none"
|
||||
x={0}
|
||||
y={0}
|
||||
y={gap / 2}
|
||||
opacity={0.5}
|
||||
stroke={stroke}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
|
|
@ -74,6 +86,7 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
|||
fill="none"
|
||||
x={0}
|
||||
y={0}
|
||||
opacity={0.3}
|
||||
stroke={stroke}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
|
|
@ -84,9 +97,11 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
|||
fill="none"
|
||||
x={0}
|
||||
y={0}
|
||||
stroke={lighten(stroke, 0.1)}
|
||||
stroke={stroke}
|
||||
opacity={1}
|
||||
strokeWidth={1}
|
||||
strokeLinecap="round"
|
||||
filter="url(#brighter)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
font: $font_18_semibold;
|
||||
color: transparentize(white, 0.5);
|
||||
color: $gray_50;
|
||||
}
|
||||
|
||||
span.val {
|
||||
|
|
|
|||
|
|
@ -15,11 +15,19 @@ interface StatsGraphCardProps extends CardProps {
|
|||
right?: string | number;
|
||||
}
|
||||
|
||||
const StatsGraphCard: VFC<StatsGraphCardProps> = ({ total, title, data, left, right }) => (
|
||||
const StatsGraphCard: VFC<StatsGraphCardProps> = ({
|
||||
total,
|
||||
title,
|
||||
data,
|
||||
left,
|
||||
right,
|
||||
}) => (
|
||||
<StatsCard
|
||||
title={title}
|
||||
total={total}
|
||||
background={<BasicCurveChart items={data} />}
|
||||
background={
|
||||
<BasicCurveChart items={data} stroke={'var(--color_primary)'} />
|
||||
}
|
||||
className={styles.card}
|
||||
>
|
||||
<div className={styles.content}>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
@keyframes appear {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.popper {
|
||||
@include outer_shadow;
|
||||
|
||||
background-color: darken($content_bg, 4%);
|
||||
background-color: $content_bg_darker;
|
||||
padding: $gap;
|
||||
box-sizing:border-box;
|
||||
box-sizing: border-box;
|
||||
touch-action: none;
|
||||
pointer-events: none;
|
||||
border-radius: $radius;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "src/styles/variables";
|
||||
@import "~flexbin/flexbin";
|
||||
@import 'src/styles/variables';
|
||||
@import '~flexbin/flexbin';
|
||||
|
||||
.wrap {
|
||||
@include row_shadow;
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
touch-action: none;
|
||||
transition: opacity 0.25s, transform 0.25s;
|
||||
cursor: pointer;
|
||||
background: $red;
|
||||
background: $color_danger;
|
||||
z-index: 2;
|
||||
|
||||
& > div {
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
border-radius: 0 0 0 $radius;
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
background: transparentize($red, $amount: 0.5);
|
||||
background: $content_bg_danger;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -93,9 +93,9 @@
|
|||
padding-bottom: 0 !important;
|
||||
|
||||
.date {
|
||||
background: transparentize($color: $content_bg, $amount: 0.2);
|
||||
background: $content_bg;
|
||||
border-radius: $radius 0 $radius 0;
|
||||
color: transparentize(white, 0.2);
|
||||
color: $gray_25;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -108,10 +108,10 @@
|
|||
bottom: 1px;
|
||||
right: 0;
|
||||
font: $font_12_regular;
|
||||
color: transparentize($color: white, $amount: 0.8);
|
||||
color: $gray_75;
|
||||
padding: 0 6px 2px;
|
||||
z-index: 2;
|
||||
background: $comment_bg;
|
||||
background: $content_bg_light;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.bar {
|
||||
font: $font_12_regular;
|
||||
color: darken(white, 60%);
|
||||
color: $gray_50;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.embed {
|
||||
padding: 0 $gap;
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparentize($content_bg, 0.15) 50% 50%;
|
||||
background: $content_bg_backdrop 50% 50%;
|
||||
background-size: cover;
|
||||
z-index: 15;
|
||||
border-radius: $radius;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
background: transparentize(black, 0.8);
|
||||
background: $content_bg_dark;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
flex-wrap: wrap;
|
||||
padding: $gap * 0.25;
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
background: $red;
|
||||
background: $color_danger;
|
||||
z-index: 10;
|
||||
font: $font_12_regular;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
|
|
@ -9,12 +9,6 @@
|
|||
z-index: 10;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.dot {
|
||||
background: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
|
|
@ -57,6 +51,6 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
background: $color_primary;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.text {
|
||||
padding: 0 $gap;
|
||||
|
|
@ -26,12 +26,12 @@
|
|||
}
|
||||
|
||||
:global(.green) {
|
||||
color: $wisegreen;
|
||||
color: $color_primary;
|
||||
}
|
||||
|
||||
& > :last-child::after {
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
height: 1em;
|
||||
width: 120px;
|
||||
flex: 0 0 120px;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.avatar {
|
||||
@include outer_shadow;
|
||||
|
||||
width: $comment_height;
|
||||
height: $comment_height;
|
||||
background-color: transparentize(black, 0.9);
|
||||
background-color: $content_bg_dark;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
border-radius: $radius;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
|
|
@ -9,12 +9,6 @@
|
|||
z-index: 10;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.dot {
|
||||
background: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
|
|
@ -57,6 +51,6 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
background: $color_primary;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
z-index: 100;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(90deg, $dark_blue, $soft_blue, $dark_blue);
|
||||
background: $global_loader_gradient;
|
||||
animation: spin infinite 1s linear;
|
||||
}
|
||||
|
||||
|
|
@ -34,5 +34,5 @@
|
|||
transform: translate(-50%, 0);
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
background: $cyan_gradient;
|
||||
background: $magic_gradient;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "src/styles/variables";
|
||||
@import "src/styles/mixins";
|
||||
@import 'src/styles/variables';
|
||||
@import 'src/styles/mixins';
|
||||
|
||||
.button {
|
||||
width: 48px;
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
.dots {
|
||||
@include blur($content_bg, 5px, 0.7);
|
||||
@include blur;
|
||||
|
||||
padding: 5px 0 0 0;
|
||||
background: $content_bg;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.helper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background: radial-gradient($red, transparent) 50% 24px no-repeat;
|
||||
background: radial-gradient($color_danger, transparent) 50% 24px no-repeat;
|
||||
background-size: 100% 48px;
|
||||
display: none;
|
||||
width: calc(100% - 20px);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.card {
|
||||
background-color: $card_bg;
|
||||
background-color: $content_bg;
|
||||
border-radius: $panel_radius;
|
||||
padding: $gap;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,27 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
@keyframes highlight {
|
||||
0% { opacity: 0.75; }
|
||||
25% { opacity: 0.5; }
|
||||
50% { opacity: 0.75; }
|
||||
75% { opacity: 0; }
|
||||
100% { opacity: 0; }
|
||||
0% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
25% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
@include outer_shadow;
|
||||
|
||||
background: $comment_bg;
|
||||
background: $content_bg_light;
|
||||
min-height: $comment_height;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
@ -35,7 +45,6 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
animation: highlight 1s 0.5s forwards;
|
||||
background: transparentize($wisegreen, 0.7);
|
||||
border-radius: $radius;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
|
@ -64,7 +73,7 @@
|
|||
.thumb {
|
||||
flex: 0 0 $comment_height;
|
||||
border-radius: $panel_radius 0 0 $panel_radius;
|
||||
background-color: transparentize(black, 0.9);
|
||||
background-color: $content_bg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -73,14 +82,15 @@
|
|||
flex-direction: row;
|
||||
flex: 0 0 40px;
|
||||
padding: 8px;
|
||||
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px;
|
||||
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px,
|
||||
inset rgba(0, 0, 0, 0.1) -1px -1px;
|
||||
border-radius: $panel_radius $panel_radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.thumb_image {
|
||||
height: $comment_height;
|
||||
background: transparentize(white, 0.97) no-repeat 50% 50%;
|
||||
background: $gray_90 no-repeat 50% 50%;
|
||||
border-radius: $panel_radius 0 0 $panel_radius;
|
||||
background-size: cover;
|
||||
flex: 0 0 $comment_height;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.cover {
|
||||
position: absolute;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url('../../../sprites/stripes.svg') transparentize($color: #000000, $amount: 0.5);
|
||||
background: url('../../../sprites/stripes.svg') $content_bg_backdrop;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../../../sprites/stripes.svg) transparentize($content_bg, 0.2);
|
||||
background: url(../../../sprites/stripes.svg) $content_bg_backdrop;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
$pad_danger: mix($red, $content_bg, 70%);
|
||||
$pad_usual: mix(white, $content_bg, 10%);
|
||||
$pad_usual: $content_bg_lightest;
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
|
|
@ -19,7 +18,7 @@ $pad_usual: mix(white, $content_bg, 10%);
|
|||
text-transform: uppercase;
|
||||
|
||||
.danger & {
|
||||
background: $pad_danger;
|
||||
background: $content_bg_danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31,7 +30,7 @@ $pad_usual: mix(white, $content_bg, 10%);
|
|||
position: relative;
|
||||
|
||||
&.danger {
|
||||
box-shadow: inset $pad_danger 0 0 0 2px;
|
||||
box-shadow: inset $content_bg_danger 0 0 0 2px;
|
||||
}
|
||||
|
||||
&.with_title {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: transparentize(darken($content_bg, 4%), 0.5);
|
||||
background: $content_bg_backdrop;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
.footer {
|
||||
@include outer_shadow();
|
||||
|
||||
background: darken($content_bg, 2%);
|
||||
background: $content_bg_dark;
|
||||
}
|
||||
|
||||
.body {
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
.close {
|
||||
@include outer_shadow;
|
||||
|
||||
background: lighten($content_bg, 4%);
|
||||
background: $content_bg_lighter;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $red;
|
||||
background-color: $color_danger;
|
||||
transform: translate(50%, 0) scale(1.25);
|
||||
}
|
||||
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
width: 100%;
|
||||
height: 40px;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(0deg, $red 50%, transparentize($red, 1));
|
||||
background: linear-gradient(0deg, $color_danger 50%, transparent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
|
||||
.shade {
|
||||
position: absolute;
|
||||
background: transparentize($content_bg, 0.3);
|
||||
background: $content_bg_backdrop;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.overlay {
|
||||
@include modal_backdrop();
|
||||
@include blur;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
border: none;
|
||||
|
||||
&.active {
|
||||
background: lighten($content_bg, 4%);
|
||||
background: $content_bg_lighter;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const EditorButtons: FC = () => {
|
|||
<Button
|
||||
title={isTablet ? undefined : 'Сохранить'}
|
||||
iconRight="check"
|
||||
color={values.is_promoted ? 'primary' : 'lab'}
|
||||
color={values.is_promoted ? 'flow' : 'lab'}
|
||||
disabled={isSubmitting}
|
||||
type="submit"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
|
|
@ -10,6 +10,8 @@
|
|||
}
|
||||
|
||||
.wrap {
|
||||
@include blur;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -20,8 +22,6 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: appear 0.25s forwards;
|
||||
|
||||
@include blur();
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -37,6 +37,6 @@
|
|||
|
||||
.subtitle {
|
||||
font: $font_12_medium;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@ interface IProps extends IEditorComponentProps {}
|
|||
const EditorPublicSwitch: FC<IProps> = () => {
|
||||
const { values, setFieldValue } = useNodeFormContext();
|
||||
|
||||
const onChange = useCallback(() => setFieldValue('is_promoted', !values.is_promoted), [
|
||||
values.is_promoted,
|
||||
setFieldValue,
|
||||
]);
|
||||
const onChange = useCallback(
|
||||
() => setFieldValue('is_promoted', !values.is_promoted),
|
||||
[values.is_promoted, setFieldValue],
|
||||
);
|
||||
|
||||
return (
|
||||
<Button
|
||||
color={values.is_promoted ? 'primary' : 'lab'}
|
||||
color={values.is_promoted ? 'flow' : 'lab'}
|
||||
type="button"
|
||||
size="giant"
|
||||
label={
|
||||
|
|
|
|||
|
|
@ -31,18 +31,25 @@ const EditorUploadButton: FC<IProps> = ({
|
|||
event.preventDefault();
|
||||
|
||||
const files = Array.from(event.target.files || []).filter(
|
||||
file => !type || getFileType(file) === type
|
||||
(file) => !type || getFileType(file) === type,
|
||||
);
|
||||
|
||||
uploadFiles(files);
|
||||
},
|
||||
[type, uploadFiles]
|
||||
[type, uploadFiles],
|
||||
);
|
||||
|
||||
const color = values.is_promoted ? 'primary' : 'lab';
|
||||
const color = values.is_promoted ? 'flow' : 'lab';
|
||||
|
||||
return (
|
||||
<Button type="button" round size="giant" className={styles.wrap} label={label} color={color}>
|
||||
<Button
|
||||
type="button"
|
||||
round
|
||||
size="giant"
|
||||
className={styles.wrap}
|
||||
label={label}
|
||||
color={color}
|
||||
>
|
||||
<Icon icon={icon} size={24} />
|
||||
<input type="file" onChange={onInputChange} accept={accept} multiple />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
@include outer_shadow();
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.5s;
|
||||
background: lighten($content_bg, 4%);
|
||||
background: $content_bg_lighter;
|
||||
flex: 0 1 $upload_button_height * 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -68,11 +68,11 @@
|
|||
justify-content: center;
|
||||
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, rgba(0, 0, 0, 0.3) -1px 0;
|
||||
border-radius: $upload_button_height;
|
||||
background: transparentize($color: lighten($content_bg, 4%), $amount: 0);
|
||||
background: $content_bg_lighter;
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $red;
|
||||
fill: $color_danger;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.preview {
|
||||
padding-top: 56.25%;
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
border-radius: $radius;
|
||||
background: 50% 50% no-repeat;
|
||||
background-size: cover;
|
||||
// background: darken($color: $content_bg, $amount: 2%);
|
||||
}
|
||||
|
||||
.input_wrap {
|
||||
|
|
@ -34,6 +33,6 @@
|
|||
}
|
||||
|
||||
&:global(.active) {
|
||||
background: $red;
|
||||
background: $color_danger;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.shade {
|
||||
background: linear-gradient(7deg, transparentize($content_bg, 0.05) 30px, transparentize($content_bg, 1) 250px);
|
||||
background: linear-gradient(7deg, $content_bg 30px, transparent 250px);
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.cell {
|
||||
@include inner_shadow;
|
||||
|
|
@ -57,13 +57,11 @@
|
|||
.quadro &,
|
||||
.horizontal & {
|
||||
max-width: calc(50% - 15px);
|
||||
@include blur(transparentize($content_bg, 0), 10px, 0.5)
|
||||
}
|
||||
|
||||
.quadro &,
|
||||
.vertical & {
|
||||
max-height: calc(50% - 15px);
|
||||
@include blur(transparentize($content_bg, 0), 10px, 0.5)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.dropdown {
|
||||
@include outer_shadow;
|
||||
@include blur($red, 15px, 0.3);
|
||||
@include blur($content_bg_info);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
background: $red;
|
||||
background: $color_danger;
|
||||
box-shadow: $content_bg 0 0 0 5px;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
&.lab {
|
||||
&::after {
|
||||
background: $blue;
|
||||
background: $color_lab;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
.comment {
|
||||
font: $font_12_regular;
|
||||
margin-top: 4px;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
flex: 1;
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
opacity: 0.3;
|
||||
fill: transparentize(white, 0.7);
|
||||
fill: $gray_75;
|
||||
stroke: none;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
background: url('../../../sprites/stripes.svg') rgba(0, 0, 0, 0.3);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
box-shadow: inset transparentize($color: white, $amount: 0.85) 0 1px;
|
||||
box-shadow: inset $gray_90 0 1px;
|
||||
touch-action: none;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
|
@ -58,11 +58,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
182deg,
|
||||
transparentize($cell_shade, 1) 50%,
|
||||
transparentize($cell_shade, 0) 95%
|
||||
);
|
||||
background: linear-gradient(182deg, transparent 50%, $content_bg 95%);
|
||||
z-index: 4;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
|
@ -76,8 +72,7 @@ img.preview {
|
|||
opacity: 0;
|
||||
|
||||
:global(.swiper-slide-active) &,
|
||||
:global(.swiper-slide-duplicate-active) &
|
||||
{
|
||||
:global(.swiper-slide-duplicate-active) & {
|
||||
transform: translate(-15%, -20%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -164,5 +159,5 @@ img.preview {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: transparentize(white, 0.95);
|
||||
color: $gray_90;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.container {
|
||||
height: 280px;
|
||||
width: 100%;
|
||||
background: transparentize(white, 0.9)
|
||||
url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg') no-repeat 50% 30%;
|
||||
background: $gray_90
|
||||
url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg')
|
||||
no-repeat 50% 30%;
|
||||
background-size: cover;
|
||||
opacity: 0.7;
|
||||
will-change: transform;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.icon {
|
||||
fill: $red;
|
||||
fill: $color_danger;
|
||||
stroke: none;
|
||||
|
||||
//path {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, useMemo } from 'react';
|
||||
import React, {
|
||||
ButtonHTMLAttributes,
|
||||
DetailedHTMLProps,
|
||||
FC,
|
||||
memo,
|
||||
useMemo,
|
||||
} from 'react';
|
||||
|
||||
import Tippy from '@tippyjs/react';
|
||||
import classnames from 'classnames';
|
||||
|
|
@ -14,7 +20,17 @@ type IButtonProps = DetailedHTMLProps<
|
|||
HTMLButtonElement
|
||||
> & {
|
||||
size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
|
||||
color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab' | 'outline-white' | 'flat';
|
||||
color?:
|
||||
| 'primary'
|
||||
| 'danger'
|
||||
| 'info'
|
||||
| 'outline'
|
||||
| 'link'
|
||||
| 'gray'
|
||||
| 'flow'
|
||||
| 'lab'
|
||||
| 'outline-white'
|
||||
| 'flat';
|
||||
iconLeft?: IIcon;
|
||||
iconRight?: IIcon;
|
||||
title?: string;
|
||||
|
|
@ -65,7 +81,7 @@ const Button: FC<IButtonProps> = memo(
|
|||
children,
|
||||
iconOnly,
|
||||
round,
|
||||
]
|
||||
],
|
||||
);
|
||||
|
||||
const loaderSize = useMemo(() => {
|
||||
|
|
@ -79,9 +95,23 @@ const Button: FC<IButtonProps> = memo(
|
|||
return (
|
||||
<Tippy content={label || ''} disabled={!label}>
|
||||
<button className={computedClassName} {...props}>
|
||||
{iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />}
|
||||
{iconLeft && (
|
||||
<Icon
|
||||
icon={iconLeft}
|
||||
size={20}
|
||||
key={0}
|
||||
className={styles.icon_left}
|
||||
/>
|
||||
)}
|
||||
{!!title ? <span>{title}</span> : children}
|
||||
{iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />}
|
||||
{iconRight && (
|
||||
<Icon
|
||||
icon={iconRight}
|
||||
size={20}
|
||||
key={2}
|
||||
className={styles.icon_right}
|
||||
/>
|
||||
)}
|
||||
{loading && (
|
||||
<div className={styles.loading}>
|
||||
<LoaderCircle size={loaderSize} />
|
||||
|
|
@ -90,7 +120,7 @@ const Button: FC<IButtonProps> = memo(
|
|||
</button>
|
||||
</Tippy>
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export { Button };
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
||||
background: $button_bg_color;
|
||||
background: $color_primary;
|
||||
border-radius: $radius;
|
||||
|
||||
fill: white;
|
||||
|
|
@ -36,7 +36,8 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s;
|
||||
transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s,
|
||||
background-color 0.5s;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
|
|
@ -68,10 +69,6 @@
|
|||
&:global(.disabled) {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.stretchy) {
|
||||
|
|
@ -81,7 +78,7 @@
|
|||
|
||||
&:global(.disabled),
|
||||
&:global(.grey) {
|
||||
background: transparentize(white, 0.9);
|
||||
background: $gray_90;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -117,26 +114,26 @@
|
|||
|
||||
&.outline {
|
||||
background: transparent;
|
||||
box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
|
||||
color: transparentize(white, 0.8);
|
||||
box-shadow: inset $gray_75 0 0 0 2px;
|
||||
color: $gray_75;
|
||||
|
||||
svg {
|
||||
fill: transparentize(white, 0.8);
|
||||
fill: $gray_75;
|
||||
}
|
||||
}
|
||||
|
||||
&.outline-white {
|
||||
background: transparent;
|
||||
box-shadow: inset transparentize(white, 0) 0 0 0 2px;
|
||||
color: transparentize(white, 0);
|
||||
box-shadow: inset $white 0 0 0 2px;
|
||||
color: $white;
|
||||
|
||||
svg {
|
||||
fill: transparentize(white, 0);
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.gray {
|
||||
background: lighten($content_bg, 8%);
|
||||
background: $content_bg_lightest;
|
||||
}
|
||||
|
||||
&.link {
|
||||
|
|
@ -233,22 +230,31 @@
|
|||
|
||||
.primary {
|
||||
@include outer_shadow;
|
||||
background: $red_gradient_alt;
|
||||
background: $primary_gradient;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
.danger {
|
||||
@include outer_shadow;
|
||||
background: $green_gradient;
|
||||
background: $danger_gradient;
|
||||
}
|
||||
|
||||
.info {
|
||||
@include outer_shadow;
|
||||
background: $info_gradient;
|
||||
}
|
||||
|
||||
.lab {
|
||||
background: $blue;
|
||||
background: $lab_gradient;
|
||||
}
|
||||
|
||||
.flow {
|
||||
background: $flow_gradient;
|
||||
}
|
||||
|
||||
.flat {
|
||||
box-shadow: none;
|
||||
background: $comment_bg;
|
||||
color: darken(white, 20%);
|
||||
background: $content_bg_light;
|
||||
color: $gray_25;
|
||||
}
|
||||
|
||||
.loading {
|
||||
|
|
@ -260,5 +266,5 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparentize($content_bg, 0.1);
|
||||
background: $content_bg_backdrop;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
& > * {
|
||||
border-radius: 0;
|
||||
box-shadow: transparentize($color: #000000, $amount: 0.1) 1px 0;
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $radius $radius 0;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.container {
|
||||
min-height: $info_height;
|
||||
|
|
@ -6,23 +6,23 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $text_small;
|
||||
font: $font_14_regular;
|
||||
line-height: 1.2em;
|
||||
padding: $gap;
|
||||
background: transparentize(white, 0.9);
|
||||
background: $gray_90;
|
||||
|
||||
&:global(.danger) {
|
||||
color: white;
|
||||
background: transparentize($red, 0.5);
|
||||
background: $content_bg_danger;
|
||||
}
|
||||
|
||||
&:global(.warning) {
|
||||
color: white;
|
||||
background: transparentize($red, 0.5);
|
||||
background: $content_bg_danger;
|
||||
}
|
||||
|
||||
&:global(.primary) {
|
||||
color: white;
|
||||
background: transparentize($red, 0.5);
|
||||
background: $content_bg_danger;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
color: inherit;
|
||||
|
||||
&.has_error {
|
||||
color: $red;
|
||||
color: $color_danger;
|
||||
}
|
||||
|
||||
&.has_prefix {
|
||||
|
|
@ -29,7 +29,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.suffix, .prefix{
|
||||
.suffix,
|
||||
.prefix {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
|
||||
|
|
|
|||
|
|
@ -17,11 +17,12 @@
|
|||
}
|
||||
|
||||
&.has_error {
|
||||
box-shadow: inset $red 0 0 0 1px;
|
||||
box-shadow: inset $content_bg_danger 0 0 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.error, .title {
|
||||
.error,
|
||||
.title {
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
|
|
@ -37,7 +38,7 @@
|
|||
padding: 0 $gap * 0.5;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
background-color: $red;
|
||||
background-color: $content_bg_danger;
|
||||
bottom: 0;
|
||||
right: $gap * 0.5;
|
||||
transform: translate(0, 50%);
|
||||
|
|
@ -57,12 +58,14 @@
|
|||
color: $input_grey_color;
|
||||
text-transform: uppercase;
|
||||
|
||||
.focused &, .not_empty & {
|
||||
.focused &,
|
||||
.not_empty & {
|
||||
transform: translate(0, -100%) scale(0.75);
|
||||
}
|
||||
|
||||
.focused.has_error &, .not_empty.has_error & {
|
||||
.focused.has_error &,
|
||||
.not_empty.has_error & {
|
||||
color: white;
|
||||
background-color: $red;
|
||||
background-color: $content_bg_danger;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.toggle {
|
||||
height: 24px;
|
||||
width: 48px;
|
||||
flex: 0 0 48px;
|
||||
border-radius: 12px;
|
||||
background-color: transparentize(white, 0.9);
|
||||
background-color: $gray_90;
|
||||
display: flex;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
height: 18px;
|
||||
width: 18px;
|
||||
border-radius: 11px;
|
||||
background-color: darken(white, 50%);
|
||||
background-color: $gray_50;
|
||||
transform: translate(0, 0);
|
||||
transition: transform 0.25s, color 0.25s, background-color;
|
||||
}
|
||||
|
|
@ -45,19 +45,19 @@
|
|||
}
|
||||
|
||||
&.primary {
|
||||
background-color: $wisegreen;
|
||||
background-color: $color_primary;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: transparentize(white, 0.85);
|
||||
background-color: $gray_90;
|
||||
}
|
||||
|
||||
&.lab {
|
||||
background-color: $blue;
|
||||
background-color: $color_lab;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: $red;
|
||||
background-color: $color_danger;
|
||||
}
|
||||
|
||||
&.monochrome {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.wrap {
|
||||
padding: $gap $lab_gap $lab_gap;
|
||||
|
|
@ -10,13 +10,14 @@
|
|||
|
||||
.timestamp {
|
||||
font: $font_12_regular;
|
||||
color: darken(white, 40%);
|
||||
color: $gray_50;
|
||||
}
|
||||
|
||||
.comments, .like {
|
||||
.comments,
|
||||
.like {
|
||||
flex: 0;
|
||||
font: $font_16_semibold;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
fill: currentColor;
|
||||
stroke: none;
|
||||
column-gap: $gap !important;
|
||||
|
|
@ -25,6 +26,6 @@
|
|||
padding-left: $gap;
|
||||
|
||||
&.active {
|
||||
color: $red;
|
||||
color: $color_danger;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.wrap {
|
||||
min-width: 0;
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
.star {
|
||||
fill: darken(white, 76%);
|
||||
fill: $gray_75;
|
||||
flex: 0 0 32px;
|
||||
}
|
||||
|
||||
|
|
@ -16,14 +16,14 @@
|
|||
text-overflow: ellipsis;
|
||||
line-height: 22px;
|
||||
word-break: break-all;
|
||||
color: darken(white, 40%);
|
||||
color: $gray_50;
|
||||
|
||||
@include clamp(2, 22px)
|
||||
@include clamp(2, 22px);
|
||||
}
|
||||
|
||||
.description {
|
||||
font: $font_10_regular;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
|
|
@ -21,7 +21,6 @@
|
|||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.slide {
|
||||
|
|
@ -52,14 +51,6 @@
|
|||
max-height: calc(100vh - 70px - 70px);
|
||||
max-width: 100%;
|
||||
transition: box-shadow 1s;
|
||||
box-shadow: transparentize(black, 0.7) 0 3px 5px;
|
||||
|
||||
:global(.swiper-slide-active) & {
|
||||
box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
|
||||
transparentize(black, 0.7) 0 5px 5px,
|
||||
transparentize(white, 0.95) 0 -1px 2px,
|
||||
transparentize(white, 0.95) 0 -1px;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
padding-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.wrap {
|
||||
@include outer_shadow;
|
||||
|
||||
position: relative;
|
||||
background-color: $lab_post_bg;
|
||||
background-color: $content_bg;
|
||||
cursor: pointer;
|
||||
|
||||
min-width: 0;
|
||||
border-radius: $radius;
|
||||
|
||||
&.heroic {
|
||||
@include hero_gradient;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.wrap {
|
||||
padding: $lab_gap - $gap $lab_gap 0;
|
||||
|
|
@ -30,6 +30,6 @@
|
|||
}
|
||||
|
||||
.star {
|
||||
fill: darken(white, 50%);
|
||||
fill: $gray_50;
|
||||
flex: 0 0 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font: $font_12_semibold;
|
||||
background: transparentize(black, 0.9);
|
||||
background: $content_bg_dark;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
color: darken(white, 80%);
|
||||
color: $gray_75;
|
||||
padding-top: 2px;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
import React, { FC, useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Group } from '~/components/containers/Group';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {}
|
||||
|
||||
export const SidePane: FC<IProps> = () => {
|
||||
const content_width = 1100;
|
||||
const [left, setLeft] = useState(0);
|
||||
|
||||
const moveThis = useCallback(() => {
|
||||
const { width } = document.body.getBoundingClientRect();
|
||||
const shift =
|
||||
width > content_width + 64 + 20
|
||||
? (width - content_width - 64 - 20) / 2 - 54 + 64 // + content_width + 74
|
||||
: 10;
|
||||
|
||||
setLeft(shift);
|
||||
}, [setLeft]);
|
||||
|
||||
useEffect(() => {
|
||||
moveThis();
|
||||
window.addEventListener('resize', moveThis);
|
||||
document.addEventListener('DOMContentLoaded', moveThis);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', moveThis);
|
||||
document.removeEventListener('DOMContentLoaded', moveThis);
|
||||
};
|
||||
}, [moveThis]);
|
||||
|
||||
return (
|
||||
<div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}>
|
||||
<Group>
|
||||
<div className={classNames(styles.group, 'logo')}>
|
||||
<div>V</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.btn}>
|
||||
<div>P</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.btn}>
|
||||
<div>F</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.group}>
|
||||
<div className={styles.btn} />
|
||||
<div className={styles.btn} />
|
||||
<div className={styles.btn} />
|
||||
<div className={styles.btn} />
|
||||
</div>
|
||||
</Group>
|
||||
|
||||
<div className={styles.flexy} />
|
||||
|
||||
<div className={styles.btn}>S</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.pane {
|
||||
width: 54px;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
padding: $gap 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.group {
|
||||
width: 54px;
|
||||
border-radius: $panel_radius;
|
||||
background: $panel_bg;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:global(.logo) {
|
||||
height: (54px * 1.5) + $gap * 0.5;
|
||||
background: $red_gradient;
|
||||
background-size: 140px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
box-shadow: inset #111111 0 -1px, inset #222222 0 1px;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font: $font_24_semibold;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 0;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: $panel_radius;
|
||||
border-top-right-radius: $panel_radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $panel_radius;
|
||||
border-bottom-right-radius: $panel_radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
height: 54px;
|
||||
box-shadow: inset transparentize(black, 0.9) 0 -1px, inset transparentize(white, 0.95) 0 1px;
|
||||
border-radius: $panel_radius;
|
||||
background: $side_pane_btn_color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font: $font_24_medium;
|
||||
|
||||
&:global(.orange) {
|
||||
background: linear-gradient(280deg, $red, $orange);
|
||||
color: transparentize(black, 0.7);
|
||||
width: 66px;
|
||||
border-radius: 6px 0 0 6px;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flexy {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
position: relative;
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
background: white;
|
||||
border-radius: $radius;
|
||||
margin-left: ($gap + 2px) !important;
|
||||
background: 50% 50% no-repeat $wisegreen;
|
||||
background: 50% 50% no-repeat $color_primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
|
@ -21,8 +21,8 @@
|
|||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: transparentize($color: white, $amount: 0.5);
|
||||
stroke: transparentize($color: white, $amount: 0.5);
|
||||
fill: $gray_50;
|
||||
stroke: $gray_50;
|
||||
transition: fill 250ms, stroke 250ms;
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
opacity: 1;
|
||||
font-size: 12px;
|
||||
padding-right: 140px;
|
||||
color: transparentize(white, 0.7);
|
||||
color: $gray_75;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
position: absolute;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background: transparentize(white, 0.95);
|
||||
background: $gray_90;
|
||||
width: 100%;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
|
|
@ -100,8 +100,7 @@
|
|||
}
|
||||
|
||||
.bar {
|
||||
// background: linear-gradient(270deg, $green, $wisegreen);
|
||||
background: $main_gradient;
|
||||
background: $primary_gradient;
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
img.image {
|
||||
position: absolute;
|
||||
|
|
@ -47,14 +47,14 @@ img.image {
|
|||
right: 30px;
|
||||
bottom: 40px;
|
||||
opacity: 0.4;
|
||||
color: $orange;
|
||||
color: $color_offline;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: $orange;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
&__text {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.menu {
|
||||
@include inner_shadow;
|
||||
|
|
@ -21,9 +21,9 @@
|
|||
|
||||
.item {
|
||||
flex: 0 0 auto;
|
||||
padding: $gap * 0.5 $gap $gap * 0.5 $gap;
|
||||
padding: $gap * 0.5 $gap $gap * 0.5 $gap;
|
||||
fill: currentColor;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
transition: color 0.25s;
|
||||
cursor: pointer;
|
||||
border-radius: $radius;
|
||||
|
|
@ -46,15 +46,15 @@
|
|||
color: white;
|
||||
|
||||
&.green {
|
||||
background: $green_gradient;
|
||||
background: $primary_gradient;
|
||||
}
|
||||
|
||||
&.orange {
|
||||
background: $red_gradient;
|
||||
background: $danger_gradient;
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
background: $yellow_gradient;
|
||||
background: $warning_gradient;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
background-color: transparentize($content_bg, 0.05);
|
||||
background-color: $content_bg_backdrop;
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
|
||||
&.translucent {
|
||||
@include blur($content_bg, 15px, 0.5);
|
||||
@include blur;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "src/styles/mixins";
|
||||
@import "src/styles/variables";
|
||||
@import 'src/styles/mixins';
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.menu {
|
||||
flex: 0;
|
||||
|
|
@ -27,14 +27,14 @@
|
|||
position: absolute;
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: darken($content_bg, 1%);
|
||||
background: $content_bg_darker;
|
||||
display: flex;
|
||||
top: 5px;
|
||||
right: -$gap * 2 - 2px;
|
||||
border-radius: 2px;
|
||||
|
||||
@include tablet {
|
||||
right : -$gap - 1px;
|
||||
right: -$gap - 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "src/styles/variables";
|
||||
@import "src/styles/mixins";
|
||||
@import 'src/styles/variables';
|
||||
@import 'src/styles/mixins';
|
||||
|
||||
.menu {
|
||||
border-radius: $radius;
|
||||
|
|
@ -30,11 +30,11 @@ a.item {
|
|||
padding: $gap;
|
||||
font: $font_16_semibold;
|
||||
cursor: pointer;
|
||||
background-color: transparentize($secondary, 1);
|
||||
background-color: transparent;
|
||||
transition: background-color 0.25s;
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($secondary, 0.5);
|
||||
background-color: $content_bg_success;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
|
@ -15,9 +15,9 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
color: $red !important;
|
||||
color: $color_danger !important;
|
||||
|
||||
svg {
|
||||
fill: $red !important;
|
||||
fill: $color_danger !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.button {
|
||||
fill: white;
|
||||
|
|
@ -24,6 +24,6 @@
|
|||
|
||||
.description {
|
||||
font: $font_12_regular;
|
||||
color: transparentize(white, 0.6);
|
||||
color: $gray_75;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
div.block {
|
||||
@include inner_shadow_active;
|
||||
|
||||
cursor: pointer;
|
||||
background: $inset_bg;
|
||||
background: linear-gradient(135deg, $content_bg_dark, $content_bg);
|
||||
padding: $gap;
|
||||
border-radius: $radius;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.badge {
|
||||
padding: $gap;
|
||||
text-align: center;
|
||||
border-radius: $radius;
|
||||
color: $red;
|
||||
color: $color_danger;
|
||||
padding: $gap * 4 $gap;
|
||||
text-transform: uppercase;
|
||||
font: $font_18_semibold;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.placeholder {
|
||||
height: 320px;
|
||||
background: transparentize(black, 0.8);
|
||||
background: $content_bg_dark;
|
||||
border: $radius $radius 0 0;
|
||||
@include outer_shadow();
|
||||
|
||||
|
|
@ -11,6 +11,6 @@
|
|||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: transparentize(white, 0.95);
|
||||
fill: $gray_90;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.wrapper {
|
||||
border-radius: $radius;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
left: 50%;
|
||||
bottom: $gap * 2;
|
||||
transform: translate(-50%, 0);
|
||||
background: darken($content_bg, 4%);
|
||||
background: $content_bg_darker;
|
||||
width: auto;
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
|
|
@ -82,7 +82,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.slide.slide {
|
||||
|
|
@ -127,9 +126,7 @@
|
|||
|
||||
:global(.swiper-slide-active) & {
|
||||
box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
|
||||
transparentize(black, 0.7) 0 5px 5px,
|
||||
transparentize(white, 0.95) 0 -1px 2px,
|
||||
transparentize(white, 0.95) 0 -1px;
|
||||
transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
user-select: none;
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
background: linear-gradient(transparentize($content_bg, 1), $content_bg);
|
||||
background: linear-gradient(transparent, $content_bg);
|
||||
border-radius: 0 0 $radius $radius;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
transform: translate(-50%, -50%);
|
||||
font: $font_18_semibold;
|
||||
text-transform: uppercase;
|
||||
color: darken(white, 75%);
|
||||
color: $gray_75;
|
||||
height: 20px;
|
||||
margin-top: 0 !important;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
// padding: $gap;
|
||||
//background: transparentize(black, 0.8);
|
||||
border-radius: $panel_radius;
|
||||
padding: $gap 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.item {
|
||||
background: lighten($content_bg, 2%) 50% 50% no-repeat;
|
||||
background: $content_bg_light 50% 50% no-repeat;
|
||||
padding-bottom: 100%;
|
||||
border-radius: $cell_radius;
|
||||
cursor: pointer;
|
||||
|
|
@ -29,7 +29,8 @@ div.thumb {
|
|||
}
|
||||
}
|
||||
|
||||
.letters, .title {
|
||||
.letters,
|
||||
.title {
|
||||
@include outer_shadow;
|
||||
|
||||
position: absolute;
|
||||
|
|
@ -41,7 +42,7 @@ div.thumb {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
font: $font_24_semibold;
|
||||
color: transparentize(white, 0.5);
|
||||
color: $gray_50;
|
||||
border-radius: $cell_radius;
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +54,7 @@ div.thumb {
|
|||
justify-content: flex-start;
|
||||
word-break: break-word;
|
||||
overflow: hidden;
|
||||
color: transparentize(white, 0.3);
|
||||
color: $gray_25;
|
||||
|
||||
.large & {
|
||||
font: $font_14_semibold;
|
||||
|
|
|
|||
|
|
@ -1,33 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
@mixin button {
|
||||
margin: 0 $gap;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: darken(white, 50%);
|
||||
transition: fill 0.25s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $red;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
flex: 0 0 6px;
|
||||
height: $gap;
|
||||
width: 6px;
|
||||
border-radius: 4px;
|
||||
background: transparentize(black, 0.7);
|
||||
margin-left: $gap * 2;
|
||||
}
|
||||
}
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
|
@ -75,7 +46,7 @@
|
|||
|
||||
.name {
|
||||
font: $font_12_regular;
|
||||
color: transparentize(white, 0.5);
|
||||
color: $gray_50;
|
||||
text-transform: lowercase;
|
||||
|
||||
@include tablet {
|
||||
|
|
@ -83,40 +54,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
fill: transparentize(white, 0.5);
|
||||
}
|
||||
|
||||
.panel {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mark {
|
||||
flex: 0 0 32px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: -38px;
|
||||
right: 4px;
|
||||
width: 24px;
|
||||
height: 52px;
|
||||
background: $main_gradient;
|
||||
box-shadow: transparentize(black, 0.8) 4px 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.sep {
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
|
|
@ -154,16 +96,16 @@
|
|||
opacity: 1;
|
||||
|
||||
svg {
|
||||
fill: $red;
|
||||
fill: $color_like;
|
||||
}
|
||||
|
||||
.like_count {
|
||||
color: $red;
|
||||
color: $color_like;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
fill: $red;
|
||||
fill: $color_like;
|
||||
animation: pulse 0.75s infinite;
|
||||
|
||||
.like_count {
|
||||
|
|
@ -179,11 +121,11 @@
|
|||
bottom: 0;
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s, color 0.25s;
|
||||
background: $node_bg;
|
||||
background: $content_bg_dark;
|
||||
padding: 0 3px;
|
||||
border-radius: 10px;
|
||||
z-index: 3;
|
||||
color: transparentize($color: white, $amount: 0.5);
|
||||
color: $gray_50;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
|
@ -198,6 +140,7 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
color: white;
|
||||
@include hover_opacity;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
$notification_color: darken($content_bg, 2%);
|
||||
$notification_color: $content_bg_dark;
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
import React, { FC } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { ImagePresets } from '~/constants/urls';
|
||||
import markdown from '~/styles/common/markdown.module.scss';
|
||||
import { IMessage } from '~/types';
|
||||
import { formatText, getPrettyDate, getURL } from '~/utils/dom';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {
|
||||
message: IMessage;
|
||||
incoming: boolean;
|
||||
}
|
||||
|
||||
const Message: FC<IProps> = ({ message, incoming }) => {
|
||||
return (
|
||||
<div className={classNames(styles.message, { [styles.incoming]: incoming })}>
|
||||
<div className={styles.text}>
|
||||
<Group
|
||||
dangerouslySetInnerHTML={{ __html: formatText(message.text) }}
|
||||
className={markdown.wrapper}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={styles.avatar}
|
||||
style={{ backgroundImage: `url("${getURL(message.from.photo, ImagePresets.avatar)}")` }}
|
||||
/>
|
||||
|
||||
<div className={styles.stamp}>{getPrettyDate(message.created_at)}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export { Message };
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
$incoming_color: transparentize($wisegreen, 0.7);
|
||||
$outgoing_color: $comment_bg;
|
||||
|
||||
.message {
|
||||
align-items: flex-end !important;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 0 0 42px;
|
||||
position: relative;
|
||||
word-break: break-word;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 20px 0 0 20px;
|
||||
border-color: transparent transparent transparent $comment_bg;
|
||||
bottom: 0;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
&.incoming {
|
||||
flex-direction: row-reverse;
|
||||
padding: 0 40px 0 0;
|
||||
|
||||
.text {
|
||||
background: $incoming_color;
|
||||
border-radius: $radius $radius $radius 0;
|
||||
}
|
||||
|
||||
.stamp {
|
||||
left: auto;
|
||||
right: 42px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
border-width: 0 0 16px 16px;
|
||||
border-color: transparent transparent $incoming_color transparent;
|
||||
left: 24px;
|
||||
right: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex: 0 0 40px;
|
||||
border-radius: $radius;
|
||||
|
||||
background: 50% 50% no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: $gap $gap $gap * 2 $gap;
|
||||
background: $outgoing_color;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
width: 100%;
|
||||
border-radius: $radius $radius 0 $radius;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
border-radius: $radius $radius 0 $radius;
|
||||
background: $outgoing_color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.stamp {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
// background: transparentize($color: #000000, $amount: 0.9);
|
||||
font: $font_10_regular;
|
||||
bottom: 0;
|
||||
left: 42px;
|
||||
padding: 2px $gap;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.restore {
|
||||
color: $red;
|
||||
fill: $red;
|
||||
}
|
||||
|
||||
.deleted {
|
||||
background: mix($red, $content_bg, 50%);
|
||||
border-radius: $radius $radius $radius 0;
|
||||
padding: $gap * 0.5;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
box-sizing: border-box;
|
||||
border-radius: $radius;
|
||||
|
||||
@include blur($red);
|
||||
@include blur;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,12 @@ export interface ProfileAvatarProps {
|
|||
onChangePhoto: (file: File) => void;
|
||||
}
|
||||
|
||||
const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit, size }) => {
|
||||
const ProfileAvatar: FC<ProfileAvatarProps> = ({
|
||||
photo,
|
||||
onChangePhoto,
|
||||
canEdit,
|
||||
size,
|
||||
}) => {
|
||||
const onInputChange = useCallback(
|
||||
async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (!event.target.files?.length) {
|
||||
|
|
@ -23,10 +28,12 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit,
|
|||
|
||||
onChangePhoto(event.target.files[0]);
|
||||
},
|
||||
[onChangePhoto]
|
||||
[onChangePhoto],
|
||||
);
|
||||
|
||||
const backgroundImage = photo ? `url("${getURL(photo, ImagePresets.avatar)}")` : undefined;
|
||||
const backgroundImage = photo
|
||||
? `url("${getURL(photo, ImagePresets.avatar)}")`
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -38,7 +45,15 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit,
|
|||
}}
|
||||
>
|
||||
{canEdit && <input type="file" onInput={onInputChange} />}
|
||||
{canEdit && <Button iconLeft="photo_add" round iconOnly className={styles.can_edit} />}
|
||||
{canEdit && (
|
||||
<Button
|
||||
color="info"
|
||||
iconLeft="photo_add"
|
||||
round
|
||||
iconOnly
|
||||
className={styles.button}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.avatar {
|
||||
@include outer_shadow();
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.can_edit {
|
||||
.button {
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.content {
|
||||
padding: $gap * 2;
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
min-height: 33vh;
|
||||
padding: 40px;
|
||||
box-sizing: border-box;
|
||||
color: transparentize($color: white, $amount: 0.8);
|
||||
color: $gray_75;
|
||||
text-transform: uppercase;
|
||||
font: $font_16_semibold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,9 +47,7 @@ const ProfileSidebarSettings: FC<IProps> = () => {
|
|||
Отмена
|
||||
</Button>
|
||||
|
||||
<Button color="secondary" type="submit">
|
||||
Сохранить
|
||||
</Button>
|
||||
<Button type="submit">Сохранить</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</SettingsProvider>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.stack {
|
||||
background: transparentize($content_bg, 0.2);
|
||||
background: $content_bg_backdrop;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
width: auto;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
.card {
|
||||
box-shadow: transparentize(white, 0.9) -1px 0, transparentize(black, 0.7) -5px 0 15px;
|
||||
box-shadow: $gray_90 -1px 0, transparentize(black, 0.7) -5px 0 15px;
|
||||
border-radius: $radius 0 0 $radius;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -3,12 +3,6 @@ import React, { FC, FocusEventHandler, useCallback } from 'react';
|
|||
import { TagWrapper } from '~/components/tags/TagWrapper';
|
||||
import { ITag } from '~/types';
|
||||
|
||||
const getTagFeature = (tag: Partial<ITag>) => {
|
||||
if (tag?.title?.substr(0, 1) === '/') return 'green';
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
interface IProps {
|
||||
tag: Partial<ITag>;
|
||||
size?: 'normal' | 'big';
|
||||
|
|
@ -44,9 +38,11 @@ const Tag: FC<IProps> = ({
|
|||
onDelete(tag.ID!);
|
||||
}, [onDelete, tag]);
|
||||
|
||||
const isAlbumTag = tag?.title?.substr(0, 1) === '/';
|
||||
|
||||
return (
|
||||
<TagWrapper
|
||||
feature={getTagFeature(tag)}
|
||||
color={isAlbumTag ? 'primary' : undefined}
|
||||
size={size}
|
||||
deletable={deletable}
|
||||
hoverable={hoverable}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
@keyframes appear {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 100 }
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 100;
|
||||
}
|
||||
}
|
||||
|
||||
$row_height: 24px;
|
||||
|
|
@ -16,7 +20,7 @@ $row_height: 24px;
|
|||
right: -2px;
|
||||
width: calc(100vw - 15px);
|
||||
max-width: 300px;
|
||||
background: darken($content_bg, 2%);
|
||||
background: $content_bg_dark;
|
||||
z-index: 10;
|
||||
border-radius: 4px;
|
||||
animation: appear 0.25s forwards;
|
||||
|
|
@ -39,4 +43,4 @@ $row_height: 24px;
|
|||
|
||||
.arrow {
|
||||
@include popper_arrow;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,16 +9,23 @@ import styles from './styles.module.scss';
|
|||
interface IProps {
|
||||
selected: boolean;
|
||||
title: string;
|
||||
type: string;
|
||||
type: 'enter' | 'right' | 'tag';
|
||||
onSelect: (val: string) => void;
|
||||
}
|
||||
|
||||
const TagAutocompleteRow: FC<IProps> = ({ selected, type, title, onSelect }) => {
|
||||
const TagAutocompleteRow: FC<IProps> = ({
|
||||
selected,
|
||||
type,
|
||||
title,
|
||||
onSelect,
|
||||
}) => {
|
||||
const onClick = useCallback(() => onSelect(title), [title, onSelect]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.row, styles[type], { [styles.selected]: selected })}
|
||||
className={classNames(styles.row, styles[type], {
|
||||
[styles.selected]: selected,
|
||||
})}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Icon icon={type} size={16} />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
$row_height: 26px;
|
||||
|
||||
|
|
@ -16,13 +16,14 @@ $row_height: 26px;
|
|||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover, &.selected {
|
||||
&:hover,
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
background: transparentize($wisegreen, 0.6);
|
||||
background: $content_bg_success;
|
||||
}
|
||||
|
||||
&.right {
|
||||
color: lighten($wisegreen, 4%);
|
||||
color: $color_primary;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ import { Icon } from '~/components/input/Icon';
|
|||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {
|
||||
feature?: string;
|
||||
size?: string;
|
||||
color?: 'primary' | 'danger' | 'info' | 'black' | 'default';
|
||||
deletable?: boolean;
|
||||
hoverable?: boolean;
|
||||
editing?: boolean;
|
||||
|
|
@ -19,8 +19,8 @@ interface IProps {
|
|||
}
|
||||
|
||||
const TagWrapper: FC<IProps> = ({
|
||||
color = 'default',
|
||||
children,
|
||||
feature,
|
||||
size,
|
||||
deletable,
|
||||
hoverable,
|
||||
|
|
@ -32,7 +32,7 @@ const TagWrapper: FC<IProps> = ({
|
|||
}) => {
|
||||
const canBeDeleted = deletable && !editing && !hasInput;
|
||||
const onDeletePress = useCallback(
|
||||
event => {
|
||||
(event) => {
|
||||
if (!onDelete) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -40,18 +40,23 @@ const TagWrapper: FC<IProps> = ({
|
|||
event.stopPropagation();
|
||||
onDelete();
|
||||
},
|
||||
[onDelete]
|
||||
[onDelete],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.tag, feature, size, {
|
||||
is_hoverable: hoverable,
|
||||
is_editing: editing,
|
||||
deletable: canBeDeleted,
|
||||
input: hasInput,
|
||||
clickable: onClick,
|
||||
})}
|
||||
className={classNames(
|
||||
styles.tag,
|
||||
size && styles[`size-${size}`],
|
||||
styles[`color-${color}`],
|
||||
{
|
||||
[styles.hoverable]: hoverable,
|
||||
[styles.editing]: editing,
|
||||
[styles.deletable]: canBeDeleted,
|
||||
[styles.input]: hasInput,
|
||||
[styles.clickable]: onClick,
|
||||
},
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className={styles.hole} />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
$big: 1.2;
|
||||
|
||||
|
|
@ -8,7 +8,7 @@ $big: 1.2;
|
|||
overflow: hidden;
|
||||
cursor: default;
|
||||
height: $tag_height;
|
||||
background: $tag_bg;
|
||||
background: $content_bg_light;
|
||||
border-radius: ($tag_height * 0.5) 3px 3px ($tag_height * 0.5);
|
||||
font: $font_14_semibold;
|
||||
align-self: flex-start;
|
||||
|
|
@ -25,7 +25,48 @@ $big: 1.2;
|
|||
z-index: 40;
|
||||
}
|
||||
|
||||
&:global(.big) {
|
||||
&.hoverable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.editing {
|
||||
cursor: pointer;
|
||||
background-color: $content_bg;
|
||||
}
|
||||
|
||||
&.input {
|
||||
color: transparent !important;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.color-danger {
|
||||
background: $danger_gradient;
|
||||
}
|
||||
|
||||
&.color-info {
|
||||
background: $info_gradient;
|
||||
}
|
||||
|
||||
&.color-primary {
|
||||
background: $primary_gradient;
|
||||
}
|
||||
|
||||
&.color-black {
|
||||
background: transparentize(black, 0.7);
|
||||
box-shadow: none;
|
||||
color: $gray_75;
|
||||
font: $font_14_medium;
|
||||
|
||||
.hole::after {
|
||||
background: $gray_90;
|
||||
}
|
||||
}
|
||||
|
||||
&.size-big {
|
||||
height: $tag_height * $big;
|
||||
font: $font_16_semibold;
|
||||
border-radius: ($tag_height * $big * 0.5) 3px 3px ($tag_height * $big * 0.5);
|
||||
|
|
@ -36,52 +77,6 @@ $big: 1.2;
|
|||
}
|
||||
}
|
||||
|
||||
&:global(.is_hoverable) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:global(.is_editing) {
|
||||
cursor: pointer;
|
||||
background-color: lighten($tag_bg, 10%);
|
||||
}
|
||||
|
||||
&:global(.red) {
|
||||
background: $red_gradient;
|
||||
}
|
||||
|
||||
&:global(.blue) {
|
||||
background: $blue_gradient;
|
||||
}
|
||||
|
||||
&:global(.green) {
|
||||
background: $green_gradient;
|
||||
}
|
||||
|
||||
&:global(.olive) {
|
||||
background: $olive;
|
||||
color: transparentize(black, 0.4);
|
||||
}
|
||||
|
||||
&:global(.black) {
|
||||
background: transparentize(black, 0.7);
|
||||
box-shadow: none;
|
||||
color: transparentize(white, 0.6);
|
||||
font: $font_14_medium;
|
||||
|
||||
.hole::after {
|
||||
background: transparentize(white, 0.98);
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.input) {
|
||||
color: transparent !important;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
&:global(.clickable) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
background: none;
|
||||
border: none;
|
||||
|
|
@ -129,10 +124,10 @@ $big: 1.2;
|
|||
}
|
||||
|
||||
button.delete {
|
||||
box-shadow: inset transparentize(white, 0.9) 1px 0, transparentize(black, 0.7) -1px 0;
|
||||
box-shadow: inset transparentize(white, 0.95) 1px 0,
|
||||
transparentize(black, 0.7) -1px 0;
|
||||
width: 24px;
|
||||
height: $tag_height;
|
||||
background: transparentize($content_bg, 0.75);
|
||||
z-index: 24;
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
|
@ -148,4 +143,4 @@ button.delete {
|
|||
padding-right: $gap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
background: lighten($content_bg, 4%);
|
||||
background: $content_bg_lighter;
|
||||
// padding-bottom: 100%;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
|
|
@ -72,6 +72,6 @@
|
|||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background-color: $red;
|
||||
background-color: $color_danger;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
background: lighten($content_bg, 4%);
|
||||
background: $content_bg_lighter;
|
||||
padding-bottom: 100%;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
&:global(.is_uploading) {
|
||||
.thumb {
|
||||
filter: blur(10px);
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -81,6 +81,6 @@
|
|||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background-color: $red;
|
||||
background-color: $color_danger;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue