Format Uppercase interface content
1 .gg-format-uppercase { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-format-uppercase,
6 .gg-format-uppercase::after { 7 box-sizing: border-box;
8 position: relative;
9 display: block;
10 width: 8px ;
11 height: 8px ;
12 border-left: 3px solid transparent;
13 border-right: 3px solid transparent;
14 box-shadow:
15 0 -2px 0 0 ,
16 inset 0 0 0 2px 17 } 18 19 .gg-format-uppercase::after { 20 content: "";
21 position: absolute;
22 width: 6px ;
23 height: 4px ;
24 border-left: 2px solid transparent;
25 border-right: 2px solid transparent;
26 bottom: 0 ;
27 right: -8px 28 }
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 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M13 9 H10 V17 H8 V9 H5 V7 H13 V9 ZM18 13 H16 V17 H14 V13 H12 V11 H18 V13 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledFormatUppercase = 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: 8px ;14 height: 8px ;15 border-left: 3px solid transparent;16 border-right: 3px solid transparent;17 box-shadow: 0 -2px 0 0 , inset 0 0 0 2px ;18 } 19 &::after { 20 content: '';21 position: absolute;22 width: 6px ;23 height: 4px ;24 border-left: 2px solid transparent;25 border-right: 2px solid transparent;26 bottom: 0 ;27 right: -8px ;28 } 29 ` 30 31 export const FormatUppercase = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 32 (props, ref) => { 33 return ( 34 <> 35 <StyledFormatUppercase { ...props} ref={ ref} icon-role="format-uppercase" /> 36 </> 37 ) 38 } , 39 ) 40
Format Uppercase turned into an amazing 100% CSS icon made by using properties such as: transform, width, height, border-left, border-right, box-shadow,
