Captions buttons interface signs
1 .gg-captions { 2 border-radius: 1px ;
3 transform: scale(var(--ggs,1 ))
4 } 5 .gg-captions,
6 .gg-captions::after ,
7 .gg-captions::before { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 width: 20px ;
12 height: 16px ;
13 border: 2px solid
14 } 15 16 .gg-captions::after ,
17 .gg-captions::before { 18 content: "";
19 position: absolute;
20 width: 5px ;
21 height: 8px ;
22 border-right: transparent;
23 top: 2px ;
24 left: 2px 25 } 26 27 .gg-captions::before { 28 left: 9px 29 }
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 d="M11 8 V10 H8 V14 H11 V16 H6 V8 H11 Z" fill="currentColor" /> 9 <path d="M18 8 V10 H15 V14 H18 V16 H13 V8 H18 Z" fill="currentColor" /> 10 <path 11 fill-rule="evenodd" 12 clip-rule="evenodd" 13 d="M2 5 C2 4.44772 2.44772 4 3 4 H21 C21.5523 4 22 4.44772 22 5 V19 C22 19.5523 21.5523 20 21 20 H3 C2.44772 20 2 19.5523 2 19 V5 ZM4 18 V6 H20 V18 H4 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledCaptions = styled.i` 5 & { 6 border-radius: 1px ;7 transform: scale(var(--ggs, 1 ));8 } 9 &, 10 &::after , 11 &::before { 12 box-sizing: border-box;13 position: relative;14 display: block;15 width: 20px ;16 height: 16px ;17 border: 2px solid;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 width: 5px ;24 height: 8px ;25 border-right: transparent;26 top: 2px ;27 left: 2px ;28 } 29 &::before { 30 left: 9px ;31 } 32 ` 33 34 export const Captions = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 35 (props, ref) => { 36 return ( 37 <> 38 <StyledCaptions { ...props} ref={ ref} icon-role="captions" /> 39 </> 40 ) 41 } , 42 ) 43
Captions ended up an amazing 100% CSS icon built by adopting features like: border-radius, transform, width, height, border, border-right, .gg-captions,
