78 lines
1.3 KiB
SCSS
78 lines
1.3 KiB
SCSS
.ct-revert {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
pointer-events: auto;
|
|
top: var(--revert-button-top, calc(50% - var(--revert-button-size, 15px) / 2 - 1px));
|
|
inset-inline-start: calc(var(--revert-button-offset, 20px) * -1);
|
|
width: var(--revert-button-size, 15px);
|
|
height: var(--revert-button-size, 15px);
|
|
padding: 0;
|
|
border: none;
|
|
color: var(--ui-accent-color);
|
|
background: transparent;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
svg {
|
|
width: var(--revert-icon-size, 10px);
|
|
height: var(--revert-icon-size, 10px);
|
|
|
|
path,
|
|
polygon {
|
|
opacity: 0;
|
|
transform-origin: center;
|
|
transition: opacity 0.15s ease,
|
|
transform 0.15s ease;
|
|
}
|
|
|
|
path {
|
|
transform: scale(1.0);
|
|
}
|
|
|
|
polygon {
|
|
transform: scale(0.5);
|
|
}
|
|
}
|
|
|
|
&:not([disabled]) {
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
path {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
|
|
svg {
|
|
path {
|
|
opacity: 0;
|
|
transform: scale(0.5);
|
|
}
|
|
|
|
polygon {
|
|
opacity: 1;
|
|
transform: scale(1.0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// revert button when no label
|
|
[data-label="no"] .ct-revert {
|
|
--revert-button-top: calc(100% + 7px);
|
|
}
|
|
|
|
|
|
// revert button in different locations
|
|
.ct-layer-content .ct-revert {
|
|
--revert-icon-size: 8px;
|
|
--revert-button-offset: 16px;
|
|
} |