IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

added position absolute and some flexbox so I could remov changes in display and setTimeout, added tests and types, did some renaming

Browse Source
This commit is contained in:
Patrick O'Carroll
2018-07-25 10:29:55 +02:00
parent b8a4b7771a
commit f4ab432542
4 changed files with 99 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/sass/components/_delete_button.scss
View File

@@ -1,49 +1,50 @@
// sets a fixed width so that the rest of the table
// isn't affected by the animation
.delete-button-container {
max-width: 24px;
width: 24px;
direction: rtl;
max-height: 38px;
display: block;
display: flex;
align-items: center;
}
//this container is used to make sure confirm-delete isn't
//shown outside of table
.confirm-delete-container {
overflow: hidden;
width: 145px;
display: block;
position: absolute;
z-index: 1;
}
.delete-button {
&--show {
display: inline-block;
position: absolute;
&.show {
opacity: 1;
transition: opacity 0.1s ease;
z-index: 2;
}
&--hide {
display: inline-block;
&.hide {
opacity: 0;
transition: opacity 0.1s ease;
}
&--removed {
display: none;
z-index: 0;
}
}
.confirm-delete {
&--show {
display: inline-block;
display: flex;
align-items: flex-start;
&.show {
opacity: 1;
transition: opacity 0.08s ease-out, transform 0.1s ease-out;
transform: translateX(0);
}
&--hide {
display: inline-block;
&.hide {
opacity: 0;
transition: opacity 0.12s ease-in, transform 0.14s ease-in;
transform: translateX(100px);
}
&--removed {
display: none;
}
}