feat: style version input

Syncano · Feb 14, 2018 · 0cb5494 · 0cb5494
1 parent 136f03a
commit 0cb5494
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/docs/cheatsheet/web/index.html b/docs/cheatsheet/web/index.html
@@ -14,7 +14,7 @@
   <header class="c-header">
     <div class="c-header__tab">
       <a class="c-logo" href="https://syncano.io">
-        <svg width="100%" height="100%" viewBox="0 0 4450 692" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path fill="#5c9fd6" d="M2878.05,345.463c0,-130.238 -94.113,-237.659 -226.254,-237.659c-132.138,0 -224.354,105.525 -224.354,235.763c0,130.229 94.112,237.65 226.258,237.65c132.137,0 224.35,-105.517 224.35,-235.754m5.837,332.133l0,-73.329c-60.058,52.304 -139.904,84.371 -232.091,84.371c-124.542,0 -226.054,-57.584 -286.429,-145.117c-61.03,87.379 -162.875,145.079 -286.821,145.079c-204.388,0 -346.984,-154.983 -346.984,-343.217c0,-188.225 144.5,-345.083 348.888,-345.083c84.883,0 159.054,26.792 216.833,71.525c-24.108,31.079 -44.121,65.496 -59.275,102.587c-39.833,-41.17 -95.116,-66.687 -159.462,-66.687c-132.134,0 -224.35,105.525 -224.35,235.762c0,130.23 94.112,237.392 226.254,237.392c132.137,0 224.354,-105.775 224.354,-236.012l0.021,0c0.304,-187.959 144.7,-344.484 348.875,-344.484c204.387,0 346.987,154.95 346.987,343.184l0.13,334.029l-116.93,0l0,0Zm-2451.47,-617.817c-58.709,-37.579 -125.142,-57.712 -205.217,-57.712c-131.896,0 -226.796,77.808 -226.796,193.583c0,123.358 79.713,165.117 221.109,199.275c123.358,28.467 149.929,54.079 149.929,102.475c0,51.258 -45.554,84.475 -117.671,84.475c-64.129,0 -116.804,-18.904 -166.929,-53.138l-54.209,94.534c66.317,41.5 140.642,62.029 218.296,62.029c139.492,0 237.229,-74.008 237.229,-199.275c0,-111.029 -73.066,-161.321 -213.512,-195.479c-127.15,-30.367 -157.517,-53.146 -157.517,-105.338c0,-44.6 39.85,-79.712 108.179,-79.712c51.213,0 101.75,16.875 152.18,48.908l54.929,-94.625l0,0Zm2960.72,-58.012c-180.45,0 -295.454,104.1 -295.454,305.379l0,369.583l121.95,0l0,-364.625c0,-128.912 66.709,-198.292 175.767,-198.292c109.063,0 175.771,69.38 175.771,198.292l0,364.625l121.946,0l0,-369.583c0,-201.279 -115.005,-305.379 -295.455,-305.379l-4.525,0l0,0Zm933.746,343.616c0,130.238 -92.216,235.754 -224.35,235.754c-132.145,0 -226.258,-107.42 -226.258,-237.65c0,-130.237 92.217,-235.762 224.354,-235.762c132.142,0 226.254,107.421 226.254,237.658m122.634,-1.896c0,-188.233 -142.596,-343.183 -346.984,-343.183c-204.391,0 -348.891,156.858 -348.891,345.079c0,188.234 142.596,343.175 346.987,343.175c204.388,0 348.888,-156.85 348.888,-345.071m-3376.06,332.988l121.913,0l0,-369.475c0,-127.871 66.412,-193.275 174.45,-193.275c109.029,0 175.433,69.358 175.433,198.229l0,364.521l121.913,0l0,-369.475c0,-201.221 -114.971,-305.292 -295.367,-305.292c-181.383,0 -298.342,104.071 -298.342,311.234l0,363.533Zm36.734,-664.825l-264.2,441.254l0,224.004l-120.454,0l0,-223.145l-267.421,-444.017l136.237,1.904l191.629,331.704l190.209,-331.704l134,0Z" style="fill-rule:nonzero;"/></svg>
+        <svg width="100%" height="100%" viewBox="0 0 4450 692" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path fill="#005cb9" d="M2878.05,345.463c0,-130.238 -94.113,-237.659 -226.254,-237.659c-132.138,0 -224.354,105.525 -224.354,235.763c0,130.229 94.112,237.65 226.258,237.65c132.137,0 224.35,-105.517 224.35,-235.754m5.837,332.133l0,-73.329c-60.058,52.304 -139.904,84.371 -232.091,84.371c-124.542,0 -226.054,-57.584 -286.429,-145.117c-61.03,87.379 -162.875,145.079 -286.821,145.079c-204.388,0 -346.984,-154.983 -346.984,-343.217c0,-188.225 144.5,-345.083 348.888,-345.083c84.883,0 159.054,26.792 216.833,71.525c-24.108,31.079 -44.121,65.496 -59.275,102.587c-39.833,-41.17 -95.116,-66.687 -159.462,-66.687c-132.134,0 -224.35,105.525 -224.35,235.762c0,130.23 94.112,237.392 226.254,237.392c132.137,0 224.354,-105.775 224.354,-236.012l0.021,0c0.304,-187.959 144.7,-344.484 348.875,-344.484c204.387,0 346.987,154.95 346.987,343.184l0.13,334.029l-116.93,0l0,0Zm-2451.47,-617.817c-58.709,-37.579 -125.142,-57.712 -205.217,-57.712c-131.896,0 -226.796,77.808 -226.796,193.583c0,123.358 79.713,165.117 221.109,199.275c123.358,28.467 149.929,54.079 149.929,102.475c0,51.258 -45.554,84.475 -117.671,84.475c-64.129,0 -116.804,-18.904 -166.929,-53.138l-54.209,94.534c66.317,41.5 140.642,62.029 218.296,62.029c139.492,0 237.229,-74.008 237.229,-199.275c0,-111.029 -73.066,-161.321 -213.512,-195.479c-127.15,-30.367 -157.517,-53.146 -157.517,-105.338c0,-44.6 39.85,-79.712 108.179,-79.712c51.213,0 101.75,16.875 152.18,48.908l54.929,-94.625l0,0Zm2960.72,-58.012c-180.45,0 -295.454,104.1 -295.454,305.379l0,369.583l121.95,0l0,-364.625c0,-128.912 66.709,-198.292 175.767,-198.292c109.063,0 175.771,69.38 175.771,198.292l0,364.625l121.946,0l0,-369.583c0,-201.279 -115.005,-305.379 -295.455,-305.379l-4.525,0l0,0Zm933.746,343.616c0,130.238 -92.216,235.754 -224.35,235.754c-132.145,0 -226.258,-107.42 -226.258,-237.65c0,-130.237 92.217,-235.762 224.354,-235.762c132.142,0 226.254,107.421 226.254,237.658m122.634,-1.896c0,-188.233 -142.596,-343.183 -346.984,-343.183c-204.391,0 -348.891,156.858 -348.891,345.079c0,188.234 142.596,343.175 346.987,343.175c204.388,0 348.888,-156.85 348.888,-345.071m-3376.06,332.988l121.913,0l0,-369.475c0,-127.871 66.412,-193.275 174.45,-193.275c109.029,0 175.433,69.358 175.433,198.229l0,364.521l121.913,0l0,-369.475c0,-201.221 -114.971,-305.292 -295.367,-305.292c-181.383,0 -298.342,104.071 -298.342,311.234l0,363.533Zm36.734,-664.825l-264.2,441.254l0,224.004l-120.454,0l0,-223.145l-267.421,-444.017l136.237,1.904l191.629,331.704l190.209,-331.704l134,0Z" style="fill-rule:nonzero;"/></svg>
       </a>
     </div>
     <div class="c-header__tab">
@@ -29,10 +29,10 @@
     <div class="c-header__tab">
       <a data-tab="socket" href="#socket">Socket</a>
     </div>
-    <div>
+    <div class="c-header__tab c-header__tab--right">
       <select data-version>
-        <option value="master">canary (experimental)</option>
-        <option value="0">0 (current)</option>
+        <option value="master">master</option>
+        <option value="0">v0.8</option>
       </select>
     </div>
   </header>

diff --git a/docs/cheatsheet/web/script.js b/docs/cheatsheet/web/script.js
diff --git a/docs/cheatsheet/web/style.css b/docs/cheatsheet/web/style.css
@@ -79,6 +79,9 @@ td pre[class*="language-"] {
 }
   .c-header__tab + * {
     margin-left: 32px;
+  }
+  .c-header__tab--right {
+    margin-left: auto;
   }
     .c-header__tab a {
       color: #666;
@@ -191,6 +194,15 @@ td pre[class*="language-"] {
   background: #7a9a99;
 }
 
+[data-version] {
+  border: none;
+  padding: 8px;
+  border-radius: 4px;
+  background: #187eef;
+  color: #fff;
+  font-weight: bold;
+}
+
 /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
 /**
  * prism.js default theme for JavaScript, CSS and HTML