mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
Removed unused colors
This commit is contained in:
Fedor Katurov
parent
ba1823ee8a
commit
f6b76055d3
106 changed files with 563 additions and 546 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
display: flex;
|
||||
border-radius: $radius $radius 0 0;
|
||||
align-items: center;
|
||||
background: lighten($content_bg, 6%);
|
||||
background: $content_bg_lightest;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: darken(white, 50%);
|
||||
fill: $gray_50;
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
font: $font_14_semibold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: darken(white, 50%);
|
||||
background: $gray_50;
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
opacity: 0.5;
|
||||
|
|
@ -100,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: $danger_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,7 +30,7 @@
|
|||
text-transform: uppercase;
|
||||
|
||||
&.open {
|
||||
color: $red;
|
||||
color: $color_danger;
|
||||
}
|
||||
|
||||
&.closed {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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: transparentize($color_danger, $amount: 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
.date {
|
||||
background: transparentize($color: $content_bg, $amount: 0.2);
|
||||
border-radius: $radius 0 $radius 0;
|
||||
color: transparentize(white, 0.2);
|
||||
color: $gray_25;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
color: transparentize($color: white, $amount: 0.8);
|
||||
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';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
|
@ -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,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% {
|
||||
|
|
@ -34,5 +34,5 @@
|
|||
transform: translate(-50%, 0);
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
background: $cyan_gradient;
|
||||
background: $magic_gradient;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,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,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
animation: highlight 1s 0.5s forwards;
|
||||
background: transparentize($wisegreen, 0.7);
|
||||
background: transparentize($color_primary, 0.7);
|
||||
border-radius: $radius;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
|
@ -73,14 +83,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,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: $color_danger_slate;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 $color_danger_slate 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: transparentize($content_bg_darker, 0.5);
|
||||
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,11 @@
|
|||
width: 100%;
|
||||
height: 40px;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(0deg, $red 50%, transparentize($red, 1));
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
$color_danger 50%,
|
||||
transparentize($color_danger, 1)
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -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 ? 'danger' : 'info'}
|
||||
disabled={isSubmitting}
|
||||
type="submit"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
|
|
@ -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 ? 'danger' : 'info'}
|
||||
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 ? 'danger' : 'info';
|
||||
|
||||
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: transparentize($color: $content_bg_lighter, $amount: 0);
|
||||
|
||||
&: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,8 +1,8 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.dropdown {
|
||||
@include outer_shadow;
|
||||
@include blur($red, 15px, 0.3);
|
||||
@include blur($color_danger, 15px, 0.3);
|
||||
|
||||
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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -163,5 +163,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,16 @@ 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'
|
||||
| 'lab'
|
||||
| 'outline-white'
|
||||
| 'flat';
|
||||
iconLeft?: IIcon;
|
||||
iconRight?: IIcon;
|
||||
title?: string;
|
||||
|
|
@ -65,7 +80,7 @@ const Button: FC<IButtonProps> = memo(
|
|||
children,
|
||||
iconOnly,
|
||||
round,
|
||||
]
|
||||
],
|
||||
);
|
||||
|
||||
const loaderSize = useMemo(() => {
|
||||
|
|
@ -79,9 +94,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 +119,7 @@ const Button: FC<IButtonProps> = memo(
|
|||
</button>
|
||||
</Tippy>
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export { Button };
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
||||
background: $primary;
|
||||
background: $color_primary;
|
||||
border-radius: $radius;
|
||||
|
||||
fill: white;
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
|
||||
&:global(.disabled),
|
||||
&:global(.grey) {
|
||||
background: transparentize(white, 0.9);
|
||||
background: $gray_90;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -118,26 +118,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 {
|
||||
|
|
@ -234,12 +234,17 @@
|
|||
|
||||
.primary {
|
||||
@include outer_shadow;
|
||||
background: $red_gradient_alt;
|
||||
background: $color_primary_gradient;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
.danger {
|
||||
@include outer_shadow;
|
||||
background: $red;
|
||||
background: $danger_gradient;
|
||||
}
|
||||
|
||||
.info {
|
||||
@include outer_shadow;
|
||||
background: $info_gradient;
|
||||
}
|
||||
|
||||
.lab {
|
||||
|
|
@ -248,8 +253,8 @@
|
|||
|
||||
.flat {
|
||||
box-shadow: none;
|
||||
background: $comment_bg;
|
||||
color: darken(white, 20%);
|
||||
background: $content_bg_light;
|
||||
color: $gray_25;
|
||||
}
|
||||
|
||||
.loading {
|
||||
|
|
|
|||
|
|
@ -9,20 +9,20 @@
|
|||
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: transparentize($color_danger, 0.5);
|
||||
}
|
||||
|
||||
&:global(.warning) {
|
||||
color: white;
|
||||
background: transparentize($red, 0.5);
|
||||
background: transparentize($color_danger, 0.5);
|
||||
}
|
||||
|
||||
&:global(.primary) {
|
||||
color: white;
|
||||
background: transparentize($red, 0.5);
|
||||
background: transparentize($color_danger, 0.5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 $color_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: $color_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: $color_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,11 +45,11 @@
|
|||
}
|
||||
|
||||
&.primary {
|
||||
background-color: $wisegreen;
|
||||
background-color: $color_primary;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: transparentize(white, 0.85);
|
||||
background-color: $gray_90;
|
||||
}
|
||||
|
||||
&.lab {
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
}
|
||||
|
||||
&.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 {
|
||||
|
|
@ -56,9 +55,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.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,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
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,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;
|
||||
|
|
|
|||
|
|
@ -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,7 +100,7 @@
|
|||
}
|
||||
|
||||
.bar {
|
||||
background: $green_gradient;
|
||||
background: $color_primary_gradient;
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -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: $color_primary_gradient;
|
||||
}
|
||||
|
||||
&.orange {
|
||||
background: $red_gradient;
|
||||
background: $danger_gradient;
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
background: $yellow_gradient;
|
||||
background: $warning_gradient;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: transparentize($color_primary, 1);
|
||||
transition: background-color 0.25s;
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($secondary, 0.5);
|
||||
background-color: transparentize($color_primary, 0.5);
|
||||
}
|
||||
|
||||
&: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,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.placeholder {
|
||||
height: 320px;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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,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;
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: darken(white, 50%);
|
||||
fill: $gray_50;
|
||||
transition: fill 0.25s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $red;
|
||||
fill: $color_danger;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
.name {
|
||||
font: $font_12_regular;
|
||||
color: transparentize(white, 0.5);
|
||||
color: $gray_50;
|
||||
text-transform: lowercase;
|
||||
|
||||
@include tablet {
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
fill: transparentize(white, 0.5);
|
||||
fill: $gray_50;
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
|
@ -134,16 +134,16 @@
|
|||
opacity: 1;
|
||||
|
||||
svg {
|
||||
fill: $red;
|
||||
fill: $color_danger;
|
||||
}
|
||||
|
||||
.like_count {
|
||||
color: $red;
|
||||
color: $color_danger;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
fill: $red;
|
||||
fill: $color_danger;
|
||||
animation: pulse 0.75s infinite;
|
||||
|
||||
.like_count {
|
||||
|
|
@ -159,7 +159,7 @@
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -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,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
$incoming_color: transparentize($wisegreen, 0.7);
|
||||
$outgoing_color: $comment_bg;
|
||||
$incoming_color: transparentize($color_primary, 0.7);
|
||||
$outgoing_color: $content_bg_light;
|
||||
|
||||
.message {
|
||||
align-items: flex-end !important;
|
||||
|
|
@ -18,7 +18,7 @@ $outgoing_color: $comment_bg;
|
|||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 20px 0 0 20px;
|
||||
border-color: transparent transparent transparent $comment_bg;
|
||||
border-color: transparent transparent transparent $content_bg_light;
|
||||
bottom: 0;
|
||||
right: 24px;
|
||||
}
|
||||
|
|
@ -88,12 +88,12 @@ $outgoing_color: $comment_bg;
|
|||
}
|
||||
|
||||
.restore {
|
||||
color: $red;
|
||||
fill: $red;
|
||||
color: $color_danger;
|
||||
fill: $color_danger;
|
||||
}
|
||||
|
||||
.deleted {
|
||||
background: mix($red, $content_bg, 50%);
|
||||
background: mix($color_danger, $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($color_danger);
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
|
|||
|
|
@ -47,9 +47,7 @@ const ProfileSidebarSettings: FC<IProps> = () => {
|
|||
Отмена
|
||||
</Button>
|
||||
|
||||
<Button color="secondary" type="submit">
|
||||
Сохранить
|
||||
</Button>
|
||||
<Button type="submit">Сохранить</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</SettingsProvider>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.stack {
|
||||
background: transparentize($content_bg, 0.2);
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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: transparentize($color_primary, 0.6);
|
||||
}
|
||||
|
||||
&.right {
|
||||
color: lighten($wisegreen, 4%);
|
||||
color: lighten($color_primary, 4%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -42,29 +42,29 @@ $big: 1.2;
|
|||
|
||||
&:global(.is_editing) {
|
||||
cursor: pointer;
|
||||
background-color: lighten($tag_bg, 10%);
|
||||
background-color: lighten($content_bg_light, 10%);
|
||||
}
|
||||
|
||||
&:global(.red) {
|
||||
background: $red_gradient;
|
||||
background: $danger_gradient;
|
||||
}
|
||||
|
||||
&:global(.blue) {
|
||||
background: $blue_gradient;
|
||||
background: $info_gradient;
|
||||
}
|
||||
|
||||
&:global(.green) {
|
||||
background: $green_gradient;
|
||||
background: $color_primary_gradient;
|
||||
}
|
||||
|
||||
&:global(.black) {
|
||||
background: transparentize(black, 0.7);
|
||||
box-shadow: none;
|
||||
color: transparentize(white, 0.6);
|
||||
color: $gray_75;
|
||||
font: $font_14_medium;
|
||||
|
||||
.hole::after {
|
||||
background: transparentize(white, 0.98);
|
||||
background: $gray_90;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -124,8 +124,7 @@ $big: 1.2;
|
|||
}
|
||||
|
||||
button.delete {
|
||||
box-shadow: inset transparentize(white, 0.9) 1px 0,
|
||||
transparentize(black, 0.7) -1px 0;
|
||||
box-shadow: inset $gray_90 1px 0, transparentize(black, 0.7) -1px 0;
|
||||
width: 24px;
|
||||
height: $tag_height;
|
||||
background: transparentize($content_bg, 0.75);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,17 +12,18 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: transparentize($wisegreen, 0.7);
|
||||
background: transparentize($color_primary, 0.7);
|
||||
border-radius: $radius;
|
||||
z-index: 10;
|
||||
box-shadow: inset $wisegreen 0 0 0 2px;
|
||||
box-shadow: inset $color_primary 0 0 0 2px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
||||
&.active, :global(.dragging) & {
|
||||
&.active,
|
||||
:global(.dragging) & {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
|
@ -30,5 +31,5 @@
|
|||
svg.icon {
|
||||
width: auto;
|
||||
height: 72px;
|
||||
fill: $wisegreen;
|
||||
fill: $color_primary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@ import { BorisContacts } from '~/components/boris/BorisContacts';
|
|||
import { BorisStats } from '~/components/boris/BorisStats';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { SuperPowersToggle } from '~/containers/auth/SuperPowersToggle';
|
||||
import styles from '~/layouts/BorisLayout/styles.module.scss';
|
||||
import { BorisUsageStats } from '~/types/boris';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface Props {
|
||||
isUser: boolean;
|
||||
stats: BorisUsageStats;
|
||||
|
|
@ -14,14 +15,14 @@ interface Props {
|
|||
}
|
||||
|
||||
const BorisSidebar: FC<Props> = ({ isUser, stats, isLoading }) => (
|
||||
<Group className={styles.stats__container}>
|
||||
<Group className={styles.container}>
|
||||
<div className={styles.super_powers}>
|
||||
<SuperPowersToggle />
|
||||
</div>
|
||||
|
||||
<BorisContacts />
|
||||
|
||||
<div className={styles.stats__wrap}>
|
||||
<div className={styles.wrap}>
|
||||
<BorisStats stats={stats} isLoading={isLoading} />
|
||||
</div>
|
||||
</Group>
|
||||
|
|
|
|||
23
src/containers/boris/BorisSidebar/styles.module.scss
Normal file
23
src/containers/boris/BorisSidebar/styles.module.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
@include tablet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
background: $content_bg_dark;
|
||||
border-radius: 0 $radius $radius 0;
|
||||
padding: $gap;
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
|
||||
@include tablet {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.super_powers {
|
||||
padding: $gap * 2 0;
|
||||
}
|
||||
|
|
@ -1,10 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
$secondary_color: darken(desaturate($blue, 100%), 30%);
|
||||
$vk_color: $secondary_color;
|
||||
|
||||
.dialog {
|
||||
}
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
|
@ -17,32 +11,6 @@ $vk_color: $secondary_color;
|
|||
}
|
||||
}
|
||||
|
||||
.secondary_button {
|
||||
background: $content_bg;
|
||||
box-shadow: inset $vk_color 0 0 0 2px;
|
||||
color: $vk_color;
|
||||
|
||||
svg {
|
||||
fill: $vk_color;
|
||||
margin-right: $gap;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot_button {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin: $gap * 2 0 0 0 !important;
|
||||
padding: $gap * 2 0 0 0;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
.links {
|
||||
font: $font_14_regular;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: lighten($content_bg, 40%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
padding: $login_dialog_padding;
|
||||
|
|
@ -13,6 +13,6 @@
|
|||
|
||||
span {
|
||||
padding-left: $gap;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
padding: $gap $gap $gap * 4;
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
.text {
|
||||
font: $font_14_regular;
|
||||
padding: $gap;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
}
|
||||
|
||||
.shade,
|
||||
|
|
@ -34,18 +34,18 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,24 +15,24 @@ import styles from './styles.module.scss';
|
|||
|
||||
interface RestoreRequestDialogProps extends DialogComponentProps {}
|
||||
|
||||
const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({ onRequestClose }) => {
|
||||
const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({
|
||||
onRequestClose,
|
||||
}) => {
|
||||
useCloseOnEscape(onRequestClose);
|
||||
|
||||
const [isSent, setIsSent] = useState(false);
|
||||
const onSent = useCallback(() => setIsSent(true), [setIsSent]);
|
||||
|
||||
const { isSubmitting, handleSubmit, handleChange, errors, values } = useRestoreRequestForm(
|
||||
apiRequestRestoreCode,
|
||||
onSent
|
||||
);
|
||||
const { isSubmitting, handleSubmit, handleChange, errors, values } =
|
||||
useRestoreRequestForm(apiRequestRestoreCode, onSent);
|
||||
|
||||
const buttons = useMemo(
|
||||
() => (
|
||||
<Group className={styles.buttons}>
|
||||
<Button color="secondary">Восстановить</Button>
|
||||
<Button>Восстановить</Button>
|
||||
</Group>
|
||||
),
|
||||
[]
|
||||
[],
|
||||
);
|
||||
|
||||
const header = useMemo(() => <div className={styles.illustration} />, []);
|
||||
|
|
@ -58,7 +58,8 @@ const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({ onRequestClose }
|
|||
/>
|
||||
|
||||
<div className={styles.text}>
|
||||
Введите имя пользователя или адрес почты. Мы пришлем ссылку для сброса пароля.
|
||||
Введите имя пользователя или адрес почты. Мы пришлем ссылку для
|
||||
сброса пароля.
|
||||
</div>
|
||||
</Group>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
padding: $gap $gap $gap * 4;
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
.text {
|
||||
font: $font_14_regular;
|
||||
padding: $gap;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../../styles/variables";
|
||||
@import '../../../styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
|
@ -25,7 +25,10 @@
|
|||
left: 0;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
background: linear-gradient(transparentize($content_bg, 1), $content_bg 90%);
|
||||
background: linear-gradient(
|
||||
transparentize($content_bg, 1),
|
||||
$content_bg 90%
|
||||
);
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
||||
|
|
@ -73,7 +76,7 @@
|
|||
.search {
|
||||
@include outer_shadow();
|
||||
|
||||
background: lighten($content_bg, 3%);
|
||||
background: $content_bg_lighter;
|
||||
padding: $gap;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
|
@ -91,7 +94,6 @@
|
|||
}
|
||||
|
||||
.toggles {
|
||||
|
||||
& > div {
|
||||
padding: $gap;
|
||||
font: $font_14_semibold;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.title {
|
||||
padding-bottom: $gap;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
@include outer_shadow;
|
||||
|
||||
border-radius: $radius;
|
||||
background: $comment_bg;
|
||||
background: $content_bg_light;
|
||||
padding: $gap;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -52,9 +52,10 @@ const Header: FC<HeaderProps> = observer(() => {
|
|||
[borisCommentedAt, isUser, user.last_seen_boris],
|
||||
);
|
||||
|
||||
const hasLabUpdates = useMemo(() => labStats.updates.length > 0, [
|
||||
labStats.updates,
|
||||
]);
|
||||
const hasLabUpdates = useMemo(
|
||||
() => labStats.updates.length > 0,
|
||||
[labStats.updates],
|
||||
);
|
||||
const hasFlowUpdates = useMemo(() => flowUpdates.length > 0, [flowUpdates]);
|
||||
|
||||
// Needed for SSR
|
||||
|
|
@ -113,12 +114,7 @@ const Header: FC<HeaderProps> = observer(() => {
|
|||
)}
|
||||
|
||||
{!isUser && (
|
||||
<Button
|
||||
className={styles.user_button}
|
||||
onClick={onLogin}
|
||||
round
|
||||
color="secondary"
|
||||
>
|
||||
<Button className={styles.user_button} onClick={onLogin} round>
|
||||
ВДОХ
|
||||
</Button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../../styles/variables";
|
||||
@import '../../../styles/variables';
|
||||
|
||||
@keyframes appear {
|
||||
from {
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: $red;
|
||||
color: $color_danger;
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 4px;
|
||||
background: lighten($red, 10%);
|
||||
background: lighten($color_danger, 10%);
|
||||
right: 12px;
|
||||
top: 6px;
|
||||
transition: opacity 0.5s;
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
}
|
||||
|
||||
&.boris::after {
|
||||
background: lighten($wisegreen, 10%);
|
||||
background: lighten($color_primary, 10%);
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@import "../../../styles/variables";
|
||||
@import '../../../styles/variables';
|
||||
|
||||
.wrap {
|
||||
}
|
||||
|
||||
.list {
|
||||
border-radius: $radius;
|
||||
background: transparentize(white, 0.95);
|
||||
background: $gray_90;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
grid-template-columns: 20px auto 20px;
|
||||
grid-column-gap: $gap * 1.5;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid transparentize(white, 0.9);
|
||||
border-bottom: 1px solid $gray_90;
|
||||
padding: $gap;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.25s;
|
||||
fill: $red;
|
||||
fill: $color_danger;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.messages {
|
||||
padding: $gap;
|
||||
background: $node_bg;
|
||||
background: $content_bg_dark;
|
||||
display: flex;
|
||||
flex-direction: column !important;
|
||||
overflow: auto;
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
div.warning.warning {
|
||||
padding: $gap;
|
||||
box-shadow: $red 0 0 0 2px;
|
||||
box-shadow: $color_danger 0 0 0 2px;
|
||||
border-radius: $radius;
|
||||
font: $font_14_semibold;
|
||||
margin-bottom: $gap * 2;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
@include outer_shadow;
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
flex-direction: column;
|
||||
background: $comment_bg;
|
||||
background: $content_bg_light;
|
||||
height: 100%;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
font: $font_14_regular;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
color: transparentize(white, 0.5);
|
||||
color: $gray_50;
|
||||
}
|
||||
|
||||
.description {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrapper {
|
||||
@include outer_shadow;
|
||||
|
|
@ -35,10 +35,10 @@ div.top.top {
|
|||
.status {
|
||||
font: $font_12_regular;
|
||||
margin-top: $gap;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
|
||||
&.active {
|
||||
color: $olive;
|
||||
color: $color_online;
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const List = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{notes.map(note => (
|
||||
{notes.map((note) => (
|
||||
<NoteCard
|
||||
remove={() => onRemove(note.id)}
|
||||
update={(text, callback) => update(note.id, text, callback)}
|
||||
|
|
@ -59,7 +59,6 @@ const SettingsNotes: VFC<SettingsNotesProps> = () => {
|
|||
onClick={() => setFormIsShown(true)}
|
||||
size="mini"
|
||||
iconRight="plus"
|
||||
color="secondary"
|
||||
>
|
||||
Добавить
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
$pad_danger: mix($red, $content_bg, 70%);
|
||||
$pad_usual: mix(white, $content_bg, 10%);
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.about {
|
||||
flex: 4;
|
||||
|
|
@ -17,9 +14,6 @@ $pad_usual: mix(white, $content_bg, 10%);
|
|||
padding: 0 $gap 0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
}
|
||||
|
||||
div.base_info.base_info {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
@include sidebar_content(400px);
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
padding-left: $gap * 2;
|
||||
|
||||
svg {
|
||||
fill: transparentize(white, 0.5);
|
||||
fill: $gray_50;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -65,28 +65,20 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: darken($content_bg, 2%);
|
||||
background: $content_bg_dark;
|
||||
height: 2px;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: lighten($content_bg, 20%);
|
||||
}
|
||||
|
||||
.none {
|
||||
padding: 40px $gap;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: transparentize(white, 0.9);
|
||||
color: $gray_90;
|
||||
fill: currentColor;
|
||||
font: $font_18_semibold;
|
||||
stroke: none;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
|
@ -7,7 +7,6 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.grid {
|
||||
padding: $gap;
|
||||
}
|
||||
|
|
@ -117,40 +116,6 @@
|
|||
text-transform: uppercase;
|
||||
margin-bottom: $gap * 2;
|
||||
}
|
||||
|
||||
&__container {
|
||||
background: darken($content_bg, 4%);
|
||||
border-radius: 0 $radius $radius 0;
|
||||
box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
|
||||
padding: $gap;
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
|
||||
@include tablet {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font: $font_12_semibold;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.3;
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
|
||||
&__about {
|
||||
line-height: 1.4em;
|
||||
|
||||
p {
|
||||
margin-bottom: $gap;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrap {
|
||||
@include tablet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -162,7 +127,3 @@
|
|||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.super_powers {
|
||||
padding: $gap * 2 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@use "sass:math";
|
||||
@use 'sass:math';
|
||||
|
||||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
max-width: 2000px;
|
||||
|
|
@ -36,7 +36,7 @@ $cols: math.div($content_width, $cell);
|
|||
grid-row-end: 2;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: -1;
|
||||
background: darken($content_bg, 2%);
|
||||
background: $content_bg_dark;
|
||||
border-radius: $radius;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -53,7 +53,7 @@ $cols: math.div($content_width, $cell);
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
@media(max-width: $flow_hide_recents) {
|
||||
@media (max-width: $flow_hide_recents) {
|
||||
grid-column-start: 1;
|
||||
grid-row-end: span 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.container {
|
||||
width: 100vw;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: $page_top_offset;
|
||||
background: darken($content_bg, 2%);
|
||||
background: $content_bg_dark;
|
||||
|
||||
@include tablet {
|
||||
margin-top: 0;
|
||||
|
|
|
|||
|
|
@ -1,39 +1,47 @@
|
|||
// palette
|
||||
$red: #ff3344;
|
||||
// palette (use inside)
|
||||
$yellow: #ffd60f;
|
||||
$dark_blue: #592071;
|
||||
$blue: #582cd0;
|
||||
$green: #00d2b9;
|
||||
$olive: #8bc12a;
|
||||
$orange: #ff7549;
|
||||
$wisegreen: #007962;
|
||||
$lightgreen: lighten(adjust_hue($wisegreen, -30deg), 10%);
|
||||
$olive: #8bc12a;
|
||||
$red: #ff3344;
|
||||
$orange: #ff7549;
|
||||
$color_primary: #007962;
|
||||
$lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
|
||||
$soft_blue: #3c75ff;
|
||||
$color_danger_slate: mix(#ff3344, #23201f, 60%);
|
||||
|
||||
// main definitions
|
||||
$primary: $red;
|
||||
$secondary: $wisegreen;
|
||||
// main definitions (move to --vars)
|
||||
$color_primary: $wisegreen;
|
||||
$color_danger: $red;
|
||||
$color_online: $olive;
|
||||
$color_link: $red;
|
||||
$color_flow: $red;
|
||||
$color_lab: $blue;
|
||||
|
||||
// gradients
|
||||
$red_gradient: linear-gradient(165deg, $orange -50%, $red 150%);
|
||||
$yellow_gradient: linear-gradient(165deg, $yellow -50%, $red 150%);
|
||||
$blue_gradient: linear-gradient(170deg, $blue, $dark_blue);
|
||||
$green_gradient: linear-gradient(170deg, $lightgreen -50%, $wisegreen 150%);
|
||||
$cyan_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
|
||||
$red_gradient_alt: linear-gradient(170deg, #ff4545, #d2004c);
|
||||
// gradients (move to --vars)
|
||||
$danger_gradient: linear-gradient(165deg, $orange -50%, $color_danger 150%);
|
||||
$info_gradient: linear-gradient(170deg, $blue, $dark_blue);
|
||||
$warning_gradient: linear-gradient(165deg, $yellow -50%, $color_danger 150%);
|
||||
$color_primary_gradient: linear-gradient(
|
||||
170deg,
|
||||
$lightgreen -50%,
|
||||
$color_primary 150%
|
||||
);
|
||||
$magic_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
|
||||
|
||||
$text_color: white;
|
||||
$scroll_color: $red_gradient;
|
||||
$scroll_inactive_opacity: 0.5;
|
||||
|
||||
// --color-base
|
||||
// backgrounds (move to --vars)
|
||||
$content_bg: #23201f;
|
||||
$content_bg_dark: darken($content_bg, 2%);
|
||||
$content_bg_darker: darken($content_bg, 4%);
|
||||
$content_bg_light: lighten($content_bg, 2%);
|
||||
$content_bg_lighter: lighten($content_bg, 4%);
|
||||
$content_bg_lightest: lighten($content_bg, 6%);
|
||||
|
||||
// --color-base-light
|
||||
$comment_bg: lighten($content_bg, 2%);
|
||||
$tag_bg: lighten($content_bg, 2%);
|
||||
$menu_bg: lighten($content_bg, 2%);
|
||||
|
||||
// --color-base-dark
|
||||
$node_bg: darken($content_bg, 2%);
|
||||
$inset_bg: linear-gradient(135deg, darken($content_bg, 2%), $content_bg);
|
||||
// white shades (move to --vars)
|
||||
$white: white;
|
||||
$gray_25: mix($content_bg, white, 25%);
|
||||
$gray_50: mix($content_bg, white, 50%);
|
||||
$gray_75: mix($content_bg, white, 75%);
|
||||
$gray_90: mix($content_bg, white, 92%);
|
||||
|
|
|
|||
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