Edit Highlight interface design
1 .gg-edit-highlight { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 16px ;
8 border: 2px solid transparent;
9 box-shadow: 0 0 0 2px ;
10 border-radius: 100px ;
11 overflow: hidden
12 } 13 14 .gg-edit-highlight::before { 15 content: "";
16 display: block;
17 box-sizing: border-box;
18 position: absolute;
19 width: 6px ;
20 height: 14px ;
21 top: -1px ;
22 background:
23 repeating-linear-gradient( to bottom,
24 currentColor, currentColor 2px ,
25 transparent 0px , transparent 3px )
26 } 27 28 .gg-edit-highlight::after { 29 content: "";
30 display: block;
31 box-sizing: border-box;
32 position: absolute;
33 width: 6px ;
34 height: 14px ;
35 right: 0 ;
36 background: currentColor
37 }
1 <svg 2 width="24 " 3 height="24 " 4 viewBox="0 0 24 24 " 5 fill="none" 6 xmlns="http://www.w3 .org/2000 /svg" 7 > 8 <path 9 d="M12 6 C10.7785 6 9.64223 6.36502 8.69435 6.99194 H12 V7.99194 H7.53501 C7.00911 8.57742 6.59669 9.26689 6.33237 10.0258 H12 V11.0258 H6.07869 C6.02692 11.3428 6 11.6683 6 12 C6 12.3379 6.02793 12.6693 6.08161 12.9919 H12 V13.9919 H6.33857 C6.60189 14.7404 7.00941 15.4208 7.52779 16 H12 V17 H8.68221 C9.63251 17.6318 10.7733 18 12 18 C15.3137 18 18 15.3137 18 12 C18 8.68629 15.3137 6 12 6 Z" 10 fill="currentColor" 11 /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M2 12 C2 6.47715 6.47715 2 12 2 C17.5228 2 22 6.47715 22 12 C22 17.5228 17.5228 22 12 22 C6.47715 22 2 17.5228 2 12 ZM12 20 C7.58172 20 4 16.4183 4 12 C4 7.58172 7.58172 4 12 4 C16.4183 4 20 7.58172 20 12 C20 16.4183 16.4183 20 12 20 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledEditHighlight = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 16px ;11 height: 16px ;12 border: 2px solid transparent;13 box-shadow: 0 0 0 2px ;14 border-radius: 100px ;15 overflow: hidden;16 } 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 width: 6px ;23 height: 14px ;24 top: -1px ;25 background: repeating-linear-gradient(26 to bottom, 27 currentColor, 28 currentColor 2px , 29 transparent 0px , 30 transparent 3px 31 ); 32 } 33 &::after { 34 content: '';35 display: block;36 box-sizing: border-box;37 position: absolute;38 width: 6px ;39 height: 14px ;40 right: 0 ;41 background: currentColor;42 } 43 ` 44 45 export const EditHighlight = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 46 (props, ref) => { 47 return ( 48 <> 49 <StyledEditHighlight { ...props} ref={ ref} icon-role="edit-highlight" /> 50 </> 51 ) 52 } , 53 ) 54
Edit Highlight ended up a magic pure CSS icon built by practicing attributes such as: transform, width, height, border, box-shadow, border-radius, overflow, background,
