muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

renamed NodePanelInner

Browse source
This commit is contained in:
Fedor Katurov 2022-01-02 18:07:50 +07:00
parent 7d7afeeaf5
commit 292268dbc3
3 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

278
src/components/node/NodeTitle/styles.module.scss Normal file
View file

@ -0,0 +1,278 @@
@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;
}
}
.wrap {
display: flex;
position: relative;
width: 100%;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 0;
}
.content {
flex: 0 1 $content_width;
display: flex;
align-items: center;
justify-content: stretch;
border-radius: $radius $radius 0 0;
box-sizing: border-box;
padding: $gap;
height: 64px;
min-width: 0;
@include tablet {
border-radius: 0;
height: auto;
}
}
.title {
text-transform: uppercase;
font: $font_24_semibold;
overflow: hidden;
flex: 1;
text-overflow: ellipsis;
@include tablet {
white-space: nowrap;
padding-bottom: 0;
font: $font_16_semibold;
}
}
.name {
font: $font_14_regular;
color: transparentize(white, 0.5);
text-transform: lowercase;
@include tablet {
font: $font_12_regular;
}
}
.btn {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
fill: transparentize(white, 0.5);
}
.panel {
flex: 1;
min-width: 0;
}
.buttons,
.editor_buttons {
flex: 0;
padding-right: $gap;
fill: transparentize(white, 0.7);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
& > * {
@include button;
}
@include tablet {
align-self: center;
}
}
.buttons {
& > * {
&:last-child {
margin-right: 0;
&::after {
display: none;
}
}
}
}
.editor_buttons {
@include tablet {
display: none;
& > * {
&:last-child {
margin-right: 0;
&::after {
display: none;
}
}
&:first-child {
margin-left: 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);
}
45% {
transform: scale(1);
}
60% {
transform: scale(1.4);
}
75% {
transform: scale(1);
}
90% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
.like {
transition: fill, stroke 0.25s;
will-change: transform;
position: relative;
flex: 0 0 32px;
.is_liked {
svg {
fill: $red;
}
.like_count {
color: $red;
}
}
&:hover {
fill: $red;
animation: pulse 0.75s infinite;
.like_count {
opacity: 0;
}
}
}
.like_count {
position: absolute;
font: $font_12_bold;
left: 16px;
bottom: 0;
opacity: 1;
transition: opacity 0.25s, color 0.25s;
background: $node_bg;
padding: 0 3px;
border-radius: 10px;
z-index: 3;
color: transparentize($color: white, $amount: 0.5);
pointer-events: none;
touch-action: none;
}
.star {
transition: fill, stroke 0.25s;
will-change: transform;
.is_heroic {
svg {
fill: $orange;
}
}
&:hover {
fill: $orange;
}
}
.editor_menu_button {
display: none !important;
@include button();
@include tablet {
display: flex !important;
}
}
.editor_menu {
&:hover {
.editor_buttons {
@include tablet {
display: flex;
position: absolute;
right: 0;
top: 100%;
background: darken($content_bg, 4%);
padding: $gap * 2;
border-radius: $radius;
box-shadow: transparentize(black, 0.8) 5px 5px 5px;
transform: translate(0, -10px);
}
}
}
}