muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 11:06:40 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

dialog-editor: menu for items

Browse source
This commit is contained in:
muerwre 2019-02-27 15:08:53 +07:00
parent b8f4bace71
commit a2607b257d
4 changed files with 189 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

174
src/styles/dialogs.less
View file

@ -187,34 +187,35 @@
position: relative;
margin-bottom: 10px;
transition: all 500ms;
display: flex;
//&:hover {
// .route-row { transform: translateX(-58px); }
// .route-row-edit { transform: translateX(-58px); }
//
// &.is_editing {
// .route-row { transform: translateX(0); }
// .route-row-edit { transform: translateX(0); }
// }
//}
&.is_editing {
&.has_edit {
//transform: translateY(-2px);
.route-row { background: rgba(255, 100, 100, 0.2); }
}
}
.route-row-editor {
color: white;
padding: 20px 0 5px;
}
&.has_menu {
.route-row {
transform: translateX(-100px);
}
.route-row-buttons {
flex: 1;
flex-direction: row;
display: flex;
align-items: center;
.route-row-edit-menu {
width: 100px;
}
}
}
//
//.route-row-editor {
// color: white;
// padding: 20px 0 5px;
//}
//
//.route-row-buttons {
// flex: 1;
// flex-direction: row;
// display: flex;
// align-items: center;
//}
.route-row {
background: rgba(255, 255, 255, 0.05);
@ -224,6 +225,7 @@
cursor: pointer;
transition: background 250ms, transform 500ms;
position: relative;
flex: 1;
&:hover {
background: rgba(255, 255, 255, 0.1);
@ -236,58 +238,98 @@
}
}
.route-row-panel {
position: absolute;
top: 100%;
height: 32px;
width: 100%;
left: 0;
background: mix(@dialog_background, white, 80%);
border-radius: 0 0 @panel_radius @panel_radius;
z-index: 1;
transform: scaleY(0);
pointer-events: none;
touch-action: none;
transition: transform 250ms;
transform-origin: 0 0;
padding: 0 5px;
box-sizing: border-box;
// display: flex;
align-items: center;
fill: white;
display: none;
& > div {
display: flex;
align-items: center;
svg {
margin-right: 2px;
}
}
}
.route-row-edit {
fill: rgba(255, 255, 255, 0.3);
right: -48px;
padding-left: 0px;
stroke: none;
position: absolute;
top: 0;
width: 58px;
height: 100%;
transition: all 500ms;
.route-row-edit-button {
width: 32px;
background: rgba(255, 255, 255, 0.08);
fill: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
align-items: center;
transition: all 250ms;
position: relative;
&:hover {
fill: @green_secondary;
background: rgba(255, 255, 255, 0.1);
}
}
.route-row-edit-menu {
width: 0;
height: 100%;
right: 100%;
bottom: 0;
position: absolute;
background: rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 500ms;
display: flex;
div {
width: 50px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background: fade(@red_secondary, 30%);
}
}
}
//.route-row-panel {
// position: absolute;
// top: 100%;
// height: 32px;
// width: 100%;
// left: 0;
// background: mix(@dialog_background, white, 80%);
// border-radius: 0 0 @panel_radius @panel_radius;
// z-index: 1;
// transform: scaleY(0);
// pointer-events: none;
// touch-action: none;
// transition: transform 250ms;
// transform-origin: 0 0;
// padding: 0 5px;
// box-sizing: border-box;
// // display: flex;
// align-items: center;
// fill: white;
//
// display: none;
//
// & > div {
// display: flex;
// align-items: center;
//
// svg {
// margin-right: 2px;
// }
// }
//}
//
//.route-row-edit {
// fill: rgba(255, 255, 255, 0.3);
// right: -48px;
// padding-left: 0px;
// stroke: none;
// position: absolute;
// top: 0;
// width: 58px;
// height: 100%;
// transition: all 500ms;
// display: flex;
// align-items: center;
// justify-content: center;
// cursor: pointer;
//
// &:hover {
// fill: @green_secondary;
// }
//}
.route-title {
margin-bottom: 5px;
font-weight: bold;