joyent-portal/packages/ui-toolkit/src/styleguide/gutter.js

463 lines
13 KiB
JavaScript

import React from 'react';
export default ({ style, ...props }) => (
<svg
width="47"
style={{
borderRight: '1px solid #494949',
borderLeft: '1px solid #494949',
position: 'absolute',
zIndex: 0,
top: 0,
...style
}}
{...props}
height="100vh"
viewBox="0 0 47 798"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g id="Canvas" transform="translate(-5394 312)">
<g id="Gutter1">
<mask id="mask0_alpha">
<use
xlinkHref="#path0_fill"
transform="translate(5394 -312)"
fill="#C4C4C4"
id="Rectangle 2"
/>
</mask>
<g id="Group 6" mask="url(#mask0_alpha)">
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2378.321 -6643.134)"
fill="#494949"
id="Line 6"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2363.836 -6649.134)"
fill="#494949"
id="Line 6.30"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2349.35 -6655.134)"
fill="#494949"
id="Line 6.31"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2392.806 -6637.134)"
fill="#494949"
id="Line 6.1"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2407.292 -6631.134)"
fill="#494949"
id="Line 6.2"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2421.777 -6625.134)"
fill="#494949"
id="Line 6.3"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2436.262 -6619.134)"
fill="#494949"
id="Line 6.4"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2450.747 -6613.134)"
fill="#494949"
id="Line 6.5"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2465.233 -6607.134)"
fill="#494949"
id="Line 6.6"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2479.718 -6601.134)"
fill="#494949"
id="Line 6.7"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2494.203 -6595.134)"
fill="#494949"
id="Line 6.8"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2508.688 -6589.134)"
fill="#494949"
id="Line 6.9"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2523.174 -6583.134)"
fill="#494949"
id="Line 6.10"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2537.66 -6577.134)"
fill="#494949"
id="Line 6.11"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2552.144 -6571.134)"
fill="#494949"
id="Line 6.12"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2566.63 -6565.134)"
fill="#494949"
id="Line 6.13"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2581.115 -6559.134)"
fill="#494949"
id="Line 6.14"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2595.6 -6553.134)"
fill="#494949"
id="Line 6.15"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2610.085 -6547.134)"
fill="#494949"
id="Line 6.16"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2624.57 -6541.134)"
fill="#494949"
id="Line 6.17"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2639.056 -6535.134)"
fill="#494949"
id="Line 6.18"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2653.541 -6529.134)"
fill="#494949"
id="Line 6.19"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2668.027 -6523.134)"
fill="#494949"
id="Line 6.20"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2682.512 -6517.134)"
fill="#494949"
id="Line 6.21"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2696.997 -6511.134)"
fill="#494949"
id="Line 6.22"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2711.482 -6505.134)"
fill="#494949"
id="Line 6.23"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2725.968 -6499.134)"
fill="#494949"
id="Line 6.24"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2740.453 -6493.134)"
fill="#494949"
id="Line 6.25"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2754.938 -6487.134)"
fill="#494949"
id="Line 6.26"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2769.424 -6481.134)"
fill="#494949"
id="Line 6.27"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2783.909 -6475.134)"
fill="#494949"
id="Line 6.28"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2798.394 -6469.134)"
fill="#494949"
id="Line 6.29"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2812.88 -6463.134)"
fill="#494949"
id="Line 6.32"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2827.365 -6457.134)"
fill="#494949"
id="Line 6.33"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2841.85 -6451.134)"
fill="#494949"
id="Line 6.34"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2856.335 -6445.134)"
fill="#494949"
id="Line 6.35"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2870.82 -6439.134)"
fill="#494949"
id="Line 6.36"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2334.865 -6661.134)"
fill="#494949"
id="Line 6.32"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2928.762 -6415.134)"
fill="#494949"
id="Line 6"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2914.276 -6421.134)"
fill="#494949"
id="Line 6.30"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2899.791 -6427.134)"
fill="#494949"
id="Line 6.31"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2943.247 -6409.134)"
fill="#494949"
id="Line 6.1"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2957.732 -6403.134)"
fill="#494949"
id="Line 6.2"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2972.217 -6397.134)"
fill="#494949"
id="Line 6.3"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2986.703 -6391.134)"
fill="#494949"
id="Line 6.4"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3001.188 -6385.134)"
fill="#494949"
id="Line 6.5"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3015.673 -6379.134)"
fill="#494949"
id="Line 6.6"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3030.159 -6373.134)"
fill="#494949"
id="Line 6.7"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3044.644 -6367.134)"
fill="#494949"
id="Line 6.8"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3059.13 -6361.134)"
fill="#494949"
id="Line 6.9"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3073.614 -6355.134)"
fill="#494949"
id="Line 6.10"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3088.1 -6349.134)"
fill="#494949"
id="Line 6.11"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3102.585 -6343.134)"
fill="#494949"
id="Line 6.12"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3117.07 -6337.134)"
fill="#494949"
id="Line 6.13"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3131.556 -6331.134)"
fill="#494949"
id="Line 6.14"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3146.04 -6325.134)"
fill="#494949"
id="Line 6.15"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3160.526 -6319.134)"
fill="#494949"
id="Line 6.16"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3175.011 -6313.134)"
fill="#494949"
id="Line 6.17"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3189.497 -6307.134)"
fill="#494949"
id="Line 6.18"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3203.982 -6301.134)"
fill="#494949"
id="Line 6.19"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3218.467 -6295.134)"
fill="#494949"
id="Line 6.20"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3232.953 -6289.134)"
fill="#494949"
id="Line 6.21"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3247.438 -6283.134)"
fill="#494949"
id="Line 6.22"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3261.923 -6277.134)"
fill="#494949"
id="Line 6.23"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3276.408 -6271.134)"
fill="#494949"
id="Line 6.24"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3290.894 -6265.134)"
fill="#494949"
id="Line 6.25"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3305.379 -6259.134)"
fill="#494949"
id="Line 6.26"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3319.864 -6253.134)"
fill="#494949"
id="Line 6.27"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 3334.35 -6247.134)"
fill="#494949"
id="Line 6.28"
/>
<use
xlinkHref="#path1_stroke"
transform="rotate(-45 2885.306 -6433.134)"
fill="#494949"
id="Line 6.32"
/>
</g>
</g>
</g>
<defs>
<path id="path0_fill" d="M 0 0L 47 0L 47 798L 0 798L 0 0Z" />
<path
id="path1_stroke"
d="M 0 -5.55112e-17L 67.8823 -5.55112e-17L 67.8823 -1L 0 -1L 0 -5.55112e-17Z"
/>
</defs>
</svg>
);