github.com/outbrain/consul@v1.4.5/ui-v2/app/styles/components/action-group/layout.scss (about) 1 %action-group label span { 2 display: none; 3 } 4 %action-group::before { 5 margin-left: -1px; 6 } 7 %action-group label::after { 8 margin-left: 5px; 9 } 10 %action-group label::before { 11 margin-left: -7px; 12 } 13 %action-group { 14 width: 30px; 15 height: 30px; 16 position: absolute; 17 top: 8px; 18 right: 15px; 19 } 20 %action-group label { 21 display: block; 22 height: 100%; 23 } 24 %action-group label:last-of-type { 25 position: absolute; 26 width: 100%; 27 z-index: -1; 28 top: 0; 29 } 30 /* this is actually the group */ 31 %action-group ul { 32 position: absolute; 33 right: -10px; 34 padding: 1px; 35 } 36 %action-group ul::before { 37 position: absolute; 38 right: 18px; 39 content: ''; 40 display: block; 41 width: 10px; 42 height: 10px; 43 } 44 %action-group ul:not(.above) { 45 top: 35px; 46 } 47 %action-group ul:not(.above)::before { 48 top: -6px; 49 transform: rotate(45deg); 50 } 51 %action-group ul.above { 52 bottom: 35px; 53 } 54 %action-group ul.above::before { 55 bottom: -6px; 56 transform: rotate(225deg); 57 } 58 %action-group li { 59 position: relative; 60 z-index: 1; 61 } 62 %action-group li a { 63 width: 170px; 64 padding: 10px 10px; 65 } 66 %action-group input[type='radio'], 67 %action-group input[type='radio'] ~ ul, 68 %action-group input[type='radio'] ~ .with-confirmation > ul { 69 display: none; 70 } 71 %action-group input[type='radio']:checked ~ ul, 72 %action-group input[type='radio']:checked ~ .with-confirmation > ul { 73 display: block; 74 } 75 %action-group input[type='radio']:checked ~ label[for='actions_close'] { 76 z-index: 1; 77 }