Sand Clock interface
1 .gg-sand-clock { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 12px ;
7 height: 20px ;
8 border-top: 2px solid;
9 border-bottom: 2px solid
10 } 11 12 .gg-sand-clock::after ,
13 .gg-sand-clock::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute
18 } 19 20 .gg-sand-clock::before { 21 border-top-left-radius: 14px ;
22 border-top-right-radius: 14px ;
23 bottom: -2px ;
24 width: 10px ;
25 height: 10px ;
26 border: 2px solid;
27 left: 1px 28 } 29 30 .gg-sand-clock::after { 31 width: 6px ;
32 height: 6px ;
33 border: 2px solid transparent;
34 border-bottom-left-radius: 14px ;
35 border-bottom-right-radius: 14px ;
36 top: 0 ;
37 left: 3px ;
38 box-shadow:
39 0 0 0 2px ,
40 inset 2px 0 0 41 }
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="M13 6 H11 V7 C11 7.55228 11.4477 8 12 8 C12.5523 8 13 7.55228 13 7 V6 Z" 10 fill="currentColor" 11 /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M6 2 V4 H7 V7 C7 9.76142 9.23858 12 12 12 C9.23858 12 7 14.2386 7 17 V20 H6 V22 H18 V20 H17 V17 C17 14.2386 14.7614 12 12 12 C14.7614 12 17 9.76142 17 7 V4 H18 V2 H6 ZM9 4 H15 V7 C15 8.65685 13.6569 10 12 10 C10.3431 10 9 8.65685 9 7 V4 ZM9 17 V20 H15 V17 C15 15.3431 13.6569 14 12 14 C10.3431 14 9 15.3431 9 17 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSandClock = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 12px ;11 height: 20px ;12 border-top: 2px solid;13 border-bottom: 2px solid;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 } 22 &::before { 23 border-top-left-radius: 14px ;24 border-top-right-radius: 14px ;25 bottom: -2px ;26 width: 10px ;27 height: 10px ;28 border: 2px solid;29 left: 1px ;30 } 31 &::after { 32 width: 6px ;33 height: 6px ;34 border: 2px solid transparent;35 border-bottom-left-radius: 14px ;36 border-bottom-right-radius: 14px ;37 top: 0 ;38 left: 3px ;39 box-shadow: 0 0 0 2px , inset 2px 0 0 ;40 } 41 ` 42 43 export const SandClock = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 44 (props, ref) => { 45 return ( 46 <> 47 <StyledSandClock { ...props} ref={ ref} icon-role="sand-clock" /> 48 </> 49 ) 50 } , 51 ) 52
Sand Clock developed into a magic pure CSS icon built by applying properties such as: transform, width, height, border-top, border-bottom, border, box-shadow,
