Format Separator interface content
1 .gg-format-separator { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-format-separator,
6 .gg-format-separator::after { 7 box-sizing: border-box;
8 position: relative;
9 display: block;
10 width: 18px ;
11 height: 2px ;
12 border-radius: 3px ;
13 background: currentColor
14 } 15 16 .gg-format-separator::after { 17 content: "";
18 position: absolute;
19 top: -12px ;
20 left: 3px ;
21 opacity: .5 ;
22 width: 12px ;
23 box-shadow:
24 0 4px 0 0 ,
25 0 8px 0 0 ,
26 0 16px 0 0 27 }
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 <g opacity="0.5 "> 9 <path 10 d="M16 5 C16.5523 5 17 4.55229 17 4 C17 3.44772 16.5523 3 16 3 H8 C7.44771 3 7 3.44772 7 4 C7 4.55228 7.44771 5 8 5 L16 5 Z" 11 fill="currentColor" 12 /> 13 <path 14 d="M16 7 C16.5523 7 17 7.44772 17 8 C17 8.55229 16.5523 9 16 9 H8 C7.44771 9 7 8.55229 7 8 C7 7.44772 7.44771 7 8 7 H16 Z" 15 fill="currentColor" 16 /> 17 <path 18 d="M17 12 C17 12.5523 16.5523 13 16 13 L8 13 C7.44771 13 7 12.5523 7 12 C7 11.4477 7.44771 11 8 11 L16 11 C16.5523 11 17 11.4477 17 12 Z" 19 fill="currentColor" 20 /> 21 <path 22 d="M16 21 C16.5523 21 17 20.5523 17 20 C17 19.4477 16.5523 19 16 19 L8 19 C7.44771 19 7 19.4477 7 20 C7 20.5523 7.44771 21 8 21 H16 Z" 23 fill="currentColor" 24 /> 25 </g> 26 <path 27 fill-rule="evenodd" 28 clip-rule="evenodd" 29 d="M21 16 C21 16.5523 20.5523 17 20 17 L4 17 C3.44772 17 3 16.5523 3 16 C3 15.4477 3.44772 15 4 15 L20 15 C20.5523 15 21 15.4477 21 16 Z" 30 fill="currentColor" 31 /> 32 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledFormatSeparator = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::after { 10 box-sizing: border-box;11 position: relative;12 display: block;13 width: 18px ;14 height: 2px ;15 border-radius: 3px ;16 background: currentColor;17 } 18 &::after { 19 content: '';20 position: absolute;21 top: -12px ;22 left: 3px ;23 opacity: 0.5 ;24 width: 12px ;25 box-shadow: 0 4px 0 0 , 0 8px 0 0 , 0 16px 0 0 ;26 } 27 ` 28 29 export const FormatSeparator = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 30 (props, ref) => { 31 return ( 32 <> 33 <StyledFormatSeparator { ...props} ref={ ref} icon-role="format-separator" /> 34 </> 35 ) 36 } , 37 ) 38
Format Separator ended up a wonderful pure CSS icon made by applying attributes like: transform, width, height, border-radius, background, opacity, box-shadow,
