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

floating node panel

Browse source
This commit is contained in:
Fedor Katurov 2019-10-13 21:11:20 +07:00
parent 9e25b4e2b0
commit 336582b3d6
7 changed files with 200 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

91
src/components/node/NodePanel/styles.scss
View file

@ -1,91 +1,6 @@
.wrap {
background: $node_bg;
padding: $gap;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: stretch;
border-radius: $radius $radius 0 0;
.place {
height: 72px;
position: relative;
margin-top: -$radius;
z-index: 3;
}
.title {
text-transform: uppercase;
font: $font_24_semibold;
height: 24px;
padding-bottom: 6px;
}
.name {
font: $font_14_regular;
color: transparentize(white, 0.5);
}
.btn {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
fill: transparentize(white, 0.5);
}
.panel {
flex: 1;
}
.buttons {
flex: 0;
padding-right: $gap;
fill: transparentize(white, 0.7);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
& > * {
margin: 0 $gap;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
//height: 54px;
//border-radius: $radius $radius 0 0;
//background: linear-gradient(176deg, #f42a00, #5c1085);
//position: absolute;
//bottom: 0;
//right: 10px;
//width: 270px;
//display: flex;
}
.mark {
flex: 0 0 32px;
position: relative;
&::after {
content: ' ';
position: absolute;
top: -38px;
right: 4px;
width: 24px;
height: 52px;
background: $green_gradient;
box-shadow: transparentize(black, 0.8) 4px 2px;
border-radius: 2px;
}
}
.sep {
flex: 0 0 6px;
height: 6px;
width: 6px;
border-radius: 4px;
background: transparentize(black, 0.7);
margin-top: -$radius;
}