-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path22-comp-day-picker.html
77 lines (76 loc) · 27 KB
/
22-comp-day-picker.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DS Barebones | Day Picker </title>
<meta name="description" content="Draft of DS structure">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/cookbook.css">
<link rel="preload" href="/assets/css/0.styles.d230a1b7.css" as="style"><link rel="preload" href="/assets/js/app.ffe7ce23.js" as="script"><link rel="preload" href="/assets/js/38.00b0253a.js" as="script"><link rel="prefetch" href="/assets/js/1.bb0869bb.js"><link rel="prefetch" href="/assets/js/2.dda4c906.js"><link rel="prefetch" href="/assets/js/3.4448bd14.js"><link rel="prefetch" href="/assets/js/4.d7a8c37c.js"><link rel="prefetch" href="/assets/js/5.0053a591.js"><link rel="prefetch" href="/assets/js/6.635f180c.js"><link rel="prefetch" href="/assets/js/7.0edba530.js"><link rel="prefetch" href="/assets/js/8.06e01e5f.js"><link rel="prefetch" href="/assets/js/9.043e2e98.js"><link rel="prefetch" href="/assets/js/10.e52efe6a.js"><link rel="prefetch" href="/assets/js/11.da1cefb3.js"><link rel="prefetch" href="/assets/js/12.f8644e41.js"><link rel="prefetch" href="/assets/js/13.76a94682.js"><link rel="prefetch" href="/assets/js/14.f92133e5.js"><link rel="prefetch" href="/assets/js/15.1d2c1de0.js"><link rel="prefetch" href="/assets/js/16.64529fa9.js"><link rel="prefetch" href="/assets/js/17.764db229.js"><link rel="prefetch" href="/assets/js/18.a61dad1d.js"><link rel="prefetch" href="/assets/js/19.2328b6a5.js"><link rel="prefetch" href="/assets/js/20.5292c81b.js"><link rel="prefetch" href="/assets/js/21.f40f88ca.js"><link rel="prefetch" href="/assets/js/22.9a33f057.js"><link rel="prefetch" href="/assets/js/23.126fba23.js"><link rel="prefetch" href="/assets/js/24.0a040e88.js"><link rel="prefetch" href="/assets/js/25.dec2d660.js"><link rel="prefetch" href="/assets/js/26.31e58c5f.js"><link rel="prefetch" href="/assets/js/27.b5ecf243.js"><link rel="prefetch" href="/assets/js/28.43bad0a2.js"><link rel="prefetch" href="/assets/js/29.88b4d737.js"><link rel="prefetch" href="/assets/js/30.95f20909.js"><link rel="prefetch" href="/assets/js/31.1ce5875f.js"><link rel="prefetch" href="/assets/js/32.e5aedb4b.js"><link rel="prefetch" href="/assets/js/33.b4006fc7.js"><link rel="prefetch" href="/assets/js/34.5a868c3b.js"><link rel="prefetch" href="/assets/js/35.6017117d.js"><link rel="prefetch" href="/assets/js/36.582547c2.js"><link rel="prefetch" href="/assets/js/37.87cd32c9.js"><link rel="prefetch" href="/assets/js/39.72453420.js"><link rel="prefetch" href="/assets/js/40.8483a6b6.js"><link rel="prefetch" href="/assets/js/41.192228ca.js"><link rel="prefetch" href="/assets/js/42.9a591743.js"><link rel="prefetch" href="/assets/js/43.527a27c0.js"><link rel="prefetch" href="/assets/js/44.a0d2ad3e.js"><link rel="prefetch" href="/assets/js/45.45ffe352.js"><link rel="prefetch" href="/assets/js/46.86b9bdf8.js"><link rel="prefetch" href="/assets/js/47.e6a0e01f.js"><link rel="prefetch" href="/assets/js/48.041526d9.js"><link rel="prefetch" href="/assets/js/49.2c7a5d9e.js"><link rel="prefetch" href="/assets/js/50.14bab849.js"><link rel="prefetch" href="/assets/js/51.1fc9ddc0.js"><link rel="prefetch" href="/assets/js/52.fb8ddfff.js"><link rel="prefetch" href="/assets/js/53.39b130c3.js"><link rel="prefetch" href="/assets/js/54.d04e0c53.js"><link rel="prefetch" href="/assets/js/55.3d68ed37.js"><link rel="prefetch" href="/assets/js/56.c00d4e7e.js"><link rel="prefetch" href="/assets/js/57.b96e9034.js"><link rel="prefetch" href="/assets/js/58.650ffd7e.js"><link rel="prefetch" href="/assets/js/59.6eb3cfcc.js"><link rel="prefetch" href="/assets/js/60.b7f96d9a.js"><link rel="prefetch" href="/assets/js/61.9a28508d.js"><link rel="prefetch" href="/assets/js/62.e61b4e7f.js"><link rel="prefetch" href="/assets/js/63.0b6f5ecc.js"><link rel="prefetch" href="/assets/js/64.4fb4969e.js">
<link rel="stylesheet" href="/assets/css/0.styles.d230a1b7.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/" class="home-link router-link-active"><!----><span class="site-name">
DS Barebones
</span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><!----></div></header><div class="sidebar-mask"></div><div class="sidebar"><!----><ul class="sidebar-links"><li><div class="sidebar-group first collapsable"><p class="sidebar-heading"><span>Main</span><span class="arrow right"></span></p><!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>CSS Library</span><span class="arrow right"></span></p><!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading open"><span>Components</span><span class="arrow down"></span></p><ul class="sidebar-group-items"><li><a href="/15-comp-account.html" class="sidebar-link">Account</a></li><li><a href="/16-comp-banner.html" class="sidebar-link">Banner</a></li><li><a href="/17-comp-loader.html" class="sidebar-link">Loader</a></li><li><a href="/18-comp-cart-icon.html" class="sidebar-link">Cart Icon</a></li><li><a href="/19-comp-city-list.html" class="sidebar-link">City List</a></li><li><a href="/20-comp-city-title.html" class="sidebar-link">City Title</a></li><li><a href="/21-comp-close-btn.html" class="sidebar-link">Close Button</a></li><li><a href="/22-comp-day-picker.html" class="active sidebar-link">Day Picker</a></li><li><a href="/23-comp-deal.html" class="sidebar-link">Deal</a></li><li><a href="/24-comp-dish-card.html" class="sidebar-link">Dish Card</a></li><li><a href="/25-comp-dish-category-header.html" class="sidebar-link">Dish Category Header</a></li><li><a href="/26-comp-dish-category-list.html" class="sidebar-link">Dish Category List</a></li><li><a href="/27-comp-dish-detailed-info.html" class="sidebar-link">Dish Detailed Info</a></li><li><a href="/28-comp-dish-list.html" class="sidebar-link">Dish List</a></li><li><a href="/29-comp-dish-menu-nav.html" class="sidebar-link">Dish Menu Navigation</a></li><li><a href="/30-comp-dish-budget.html" class="sidebar-link">Dish Budget</a></li><li><a href="/31-comp-filters-panel.html" class="sidebar-link">Filters Panel</a></li><li><a href="/32-comp-filters-button.html" class="sidebar-link">Filters Button</a></li><li><a href="/33-comp-header-order-button.html" class="sidebar-link">Header Order Button</a></li><li><a href="/34-comp-header.html" class="sidebar-link">Header</a></li><li><a href="/35-comp-hero.html" class="sidebar-link">Hero</a></li><li><a href="/36-comp-hero-image.html" class="sidebar-link">Hero Image</a></li><li><a href="/37-comp-home-section-corporate.html" class="sidebar-link">Home Section Corporate</a></li><li><a href="/37a-comp-language-switch.html" class="sidebar-link">Language Switch</a></li><li><a href="/38-comp-locate-me.html" class="sidebar-link">Locate Me</a></li><li><a href="/39-comp-location-form.html" class="sidebar-link">Location Form</a></li><li><a href="/40-comp-location-search.html" class="sidebar-link">Location Search</a></li><li><a href="/41-comp-logo.html" class="sidebar-link">Logo</a></li><li><a href="/42-comp-marketing-banner.html" class="sidebar-link">Marketing Banner</a></li><li><a href="/43-comp-modal-header.html" class="sidebar-link">Modal Header</a></li><li><a href="/44-comp-nav-tabs.html" class="sidebar-link">Navigation Tabs</a></li><li><a href="/45-comp-rating.html" class="sidebar-link">Rating</a></li><li><a href="/46-comp-restaurants-search.html" class="sidebar-link">Restaurants Search</a></li><li><a href="/47-comp-review.html" class="sidebar-link">Review</a></li><li><a href="/48-comp-section-headline.html" class="sidebar-link">Section Headline</a></li><li><a href="/49-comp-sticky-cart-button.html" class="sidebar-link">Sticky Cart Button</a></li><li><a href="/50-comp-time-picker.html" class="sidebar-link">Time Picker</a></li><li><a href="/51-comp-time-picker-button.html" class="sidebar-link">Time Picker Button</a></li><li><a href="/52-comp-vendor-filter.html" class="sidebar-link">Vendor Filter</a></li><li><a href="/53-comp-vendor-info.html" class="sidebar-link">Vendor Info</a></li><li><a href="/54-comp-vendor-info-page.html" class="sidebar-link">Vendor Info Page</a></li><li><a href="/55-comp-vendor-lane.html" class="sidebar-link">Vendor Lane</a></li><li><a href="/56-comp-vendor-list.html" class="sidebar-link">Vendor List</a></li><li><a href="/57-comp-vendor-tile.html" class="sidebar-link">Vendor Tile</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="day-picker"><a href="#day-picker" aria-hidden="true" class="header-anchor">#</a> Day Picker</h1><p>Can be applied by <code>.day-picker</code> css class</p><div class="day-picker"><div class="day-picker-holder"><ul><li><label class="button-toggle-wrapper"><input type="radio" value="22/08" name="day-picker"><span class="day-value button-toggle">
Mon
<span class="day-number">22</span></span></label></li><li><label class="button-toggle-wrapper"><input type="radio" value="23/08" name="day-picker" checked="checked"><span class="day-value button-toggle">
Tue
<span class="day-number">23</span></span></label></li><li><label class="button-toggle-wrapper"><input type="radio" value="24/08" name="day-picker"><span class="day-value button-toggle">
Wed
<span class="day-number">24</span></span></label></li></ul></div><button class="nav-scroller prev"><svg width="12" height="14" xmlns="http://www.w3.org/2000/svg"><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" fill="none" stroke="#D70F64" d="m3.5,1.5l5,5.5l-5,5.5"></path></svg></button><button class="nav-scroller next"><svg width="12" height="14" xmlns="http://www.w3.org/2000/svg"><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" fill="none" stroke="#D70F64" d="m3.5,1.5l5,5.5l-5,5.5"></path></svg></button></div><div class="language-html extra-class"><div class="highlight-lines"><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>day-picker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>day-picker-holder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button-toggle-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>22/08<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>day-picker<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>day-value button-toggle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Mon
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>day-number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>22<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button-toggle-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>23/08<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>day-picker<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>day-value button-toggle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Tue
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>day-number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>23<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button-toggle-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>24/08<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>day-picker<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>day-value button-toggle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Wed
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>day-number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>24<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-scroller prev<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>14<span class="token punctuation">"</span></span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">stroke-linejoin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-linecap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span> <span class="token attr-name">fill-rule</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>evenodd<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#D70F64<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>m3.5,1.5l5,5.5l-5,5.5<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-scroller next<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>14<span class="token punctuation">"</span></span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">stroke-linejoin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-linecap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span> <span class="token attr-name">fill-rule</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>evenodd<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#D70F64<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>m3.5,1.5l5,5.5l-5,5.5<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre></div></div><!----><div class="content page-nav"><p class="inner"><span class="prev">
← <a href="/21-comp-close-btn.html" class="prev">
Close Button
</a></span><span class="next"><a href="/23-comp-deal.html">
Deal
</a> →
</span></p></div></div></div></div>
<script src="/assets/js/38.00b0253a.js" defer></script><script src="/assets/js/app.ffe7ce23.js" defer></script>
</body>
</html>