Display Fullwidth
1K Views
50 Downloads - 14 API calls
14 Lines - 341 Bytes
Apr 23, 2020 interface content design
1 .gg-display-fullwidth { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 height: 14px ;
7 width: 16px ;
8 box-shadow:
9 inset 0 0 0 2px ,
10 0 2px 0 0 ,
11 0 -2px 0 0 ;
12 border-top: 2px solid transparent;
13 border-bottom: 2px solid transparent
14 }
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="M2 5 H22 V3 H2 V5 Z" fill="currentColor" /> 9 <path d="M2 21 H22 V19 H2 V21 Z" fill="currentColor" /> 10 <path 11 fill-rule="evenodd" 12 clip-rule="evenodd" 13 d="M2 7 V17 H22 V7 H2 ZM4 9 H20 V15 H4 V9 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledDisplayFullwidth = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 height: 14px ;11 width: 16px ;12 box-shadow: inset 0 0 0 2px , 0 2px 0 0 , 0 -2px 0 0 ;13 border-top: 2px solid transparent;14 border-bottom: 2px solid transparent;15 } 16 ` 17 18 export const DisplayFullwidth = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 19 (props, ref) => { 20 return ( 21 <> 22 <StyledDisplayFullwidth { ...props} ref={ ref} icon-role="display-fullwidth" /> 23 </> 24 ) 25 } , 26 ) 27
Display Fullwidth became a magic CSS icon created by adopting attributes such as: transform, height, width, box-shadow, border-top, border-bottom, Fun facts, it has: 14 Lines of code at 341b & 246b after compiling. Quite marvelous 💎 huhh.