consul/ui-v2/app/styles/components/action-group/layout.scss

73 lines
1.3 KiB
SCSS

%action-group label span {
display: none;
}
%action-group-action {
width: 170px;
padding: 10px 10px;
text-align: left;
}
%action-group li > * {
@extend %action-group-action;
}
%action-group {
width: 30px;
height: 30px;
position: absolute;
top: 8px;
right: 15px;
}
%action-group label {
display: block;
height: 100%;
}
%action-group label:last-of-type {
position: absolute;
width: 100%;
z-index: -1;
top: 0;
}
/* this is actually the group */
%action-group ul {
position: absolute;
right: 0px;
padding: 1px;
}
%action-group ul::before {
position: absolute;
right: 9px;
content: '';
display: block;
width: 10px;
height: 10px;
}
%action-group ul:not(.above) {
top: 35px;
}
%action-group ul:not(.above)::before {
top: -6px;
transform: rotate(45deg);
}
%action-group ul.above {
bottom: 35px;
}
%action-group ul.above::before {
bottom: -6px;
transform: rotate(225deg);
}
%action-group li {
position: relative;
z-index: 1;
}
%action-group input[type='radio'],
%action-group input[type='radio'] ~ ul,
%action-group input[type='radio'] ~ .with-confirmation > ul {
display: none;
}
%action-group input[type='radio']:checked ~ ul,
%action-group input[type='radio']:checked ~ .with-confirmation > ul {
display: block;
}
%action-group input[type='radio']:checked ~ label[for='actions_close'] {
z-index: 1;
}