Onboarding responsive styles (#2352)
* update cubo doodles * migrate style changes * update snapshotspull/10616/head
Daniel Campbell
GitHub
parent
9edb8cd738
commit
44feb51386
|
|
@ -1 +1,67 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="813" height="170.25" viewBox="0 0 813 170.25"><defs><style>.a{fill:#2c323d;}.b,.c,.d{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.b{stroke:#262b35;}.c{stroke:#575e6a;}.d{stroke:#2c323d;}.e{fill:#262b35;}.f{fill:#373d4a;}.g{fill:#454c59;}.h{fill:url(#a);}</style><linearGradient id="a" x1="408.45" y1="7803.97" x2="444.49" y2="7765.1" gradientTransform="matrix(1, 0, 0, -1, 0, 7882.15)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#22adf6"/><stop offset="1" stop-color="#9394ff"/></linearGradient></defs><title>cubo_doodle</title><path class="a" d="M709,49.77v0l-1.16-5v0h0a0,0,0,0,0,0,0h0l-4.94-1.52h-.07L699,46.7v0h0s0,0,0,0h0v0l1.16,5h0l0,0h0l0,0,4.92,1.5h.07L709,49.83v0h0s0,0,0,0Z"/><path class="a" d="M320.22,102.48v0l-2.33-10s0,0,0,0h0s0,0-.05,0h0l0,0-9.86-3h-.05l-.06,0h0a.05.05,0,0,0,0,0l-7.53,7s0,0,0,0v0s0,0,0,0h0v0l2.32,10a0,0,0,0,0,0,0h0a.13.13,0,0,0,0,0h0l0,0,9.85,3h.1s0,0,0,0h0l7.54-7,0,0h0a.1.1,0,0,0,0-.07Z"/><path class="a" d="M481.38,166.74v0l-1.16-4.92v0h0l0,0h0l-4.93-1.49h-.08l-3.76,3.45a0,0,0,0,0,0,0h0v0h0v0l1.16,4.92v0h0s0,0,0,0h0l4.93,1.47h.07l3.77-3.45v0h0a0,0,0,0,0,0,0Z"/><line class="b" x1="479.62" y1="1" x2="479.62" y2="16"/><line class="b" x1="487.12" y1="8.5" x2="472.12" y2="8.5"/><line class="b" x1="807" y1="86.41" x2="807" y2="96.41"/><line class="b" x1="812" y1="91.41" x2="802" y2="91.41"/><line class="c" x1="191" y1="98.47" x2="191" y2="108.47"/><line class="c" x1="196" y1="103.47" x2="186" y2="103.47"/><line class="d" x1="662.4" y1="94.02" x2="655.32" y2="101.09"/><line class="d" x1="662.4" y1="101.09" x2="655.32" y2="94.02"/><line class="b" x1="303.75" y1="140.06" x2="296.68" y2="147.13"/><line class="b" x1="303.75" y1="147.13" x2="296.68" y2="140.06"/><path class="e" d="M566.18,132.06a3,3,0,1,1-3,3,3,3,0,0,1,3-3m0-2a5,5,0,1,0,5,5,5,5,0,0,0-5-5Z"/><path class="a" d="M332.61,32.66a3,3,0,1,1-3,3,3,3,0,0,1,3-3m0-2a5,5,0,1,0,5,5,5,5,0,0,0-5-5Z"/><path class="a" d="M74.08,56.63a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-2a10,10,0,1,0,10,10,10,10,0,0,0-10-10Z"/><circle class="f" cx="2" cy="114.84" r="2"/><path class="g" d="M524.68,45.38l12.81,3.93,3,13.08-9.81,9.14-12.81-3.9-3-13.09,9.8-9.16m-.4-2.22h-.07l-.09,0s0,0-.07,0L512.77,53.78s0,0,0,.06v0s0,0,0,.06V54l3.48,15.07s0,0,0,0,0,0,0,.07l0,0,.07,0,14.78,4.5h.06s.05,0,.07,0h0s0,0,.05,0l11.31-10.55,0,0a.23.23,0,0,0,0-.11v-.07l-3.49-15.07s0,0,0-.07v0a.13.13,0,0,0-.07,0s0,0,0,0l-14.8-4.54ZM542.7,63Zm0,0h0Z"/><path class="f" d="M264,63.84l2.79.86.67,2.86-2.15,2-2.79-.85-.67-2.87,2.15-2m-.48-2.24h-.08l-3.76,3.52,0,0h0s0,0,0,0v0l1.17,5h0l0,0h0s0,0,0,0l4.92,1.5h.06a0,0,0,0,1,0,0l3.77-3.51,0,0v-.06l-1.16-5a0,0,0,0,0,0,0h0l0,0h0l-4.93-1.52Zm6.13,6.61h0Zm0,0h0Z"/><path class="f" d="M151.67,37.29h0m-.54,1.41.7,1.81a3.4,3.4,0,0,0,1.95,2l1.81.7-1.81.7a3.4,3.4,0,0,0-1.95,2l-.7,1.82-.71-1.82a3.4,3.4,0,0,0-1.95-2l-1.81-.7,1.81-.7a3.4,3.4,0,0,0,1.95-2l.71-1.81m0-3a1.38,1.38,0,0,0-1.32.9l-1.25,3.23a1.42,1.42,0,0,1-.81.8l-3.22,1.25a1.41,1.41,0,0,0,0,2.64l3.22,1.25a1.43,1.43,0,0,1,.81.81l1.25,3.22a1.41,1.41,0,0,0,2.63,0l1.25-3.22a1.43,1.43,0,0,1,.81-.81l3.22-1.25a1.41,1.41,0,0,0,0-2.64l-3.22-1.25a1.42,1.42,0,0,1-.81-.8l-1.25-3.23a1.38,1.38,0,0,0-1.31-.9Z"/><path class="a" d="M605.13,54.78h0m-1,2.48a3,3,0,0,0,1.2,1.19,3,3,0,0,0-1.2,1.2,2.93,2.93,0,0,0-1.19-1.2,2.9,2.9,0,0,0,1.19-1.19m0-3.81a.91.91,0,0,0-.87.61l-.84,2.14a.9.9,0,0,1-.54.54l-2.14.83a.94.94,0,0,0,0,1.76l2.14.83a1,1,0,0,1,.54.54l.84,2.15a.94.94,0,0,0,1.75,0l.84-2.15a1,1,0,0,1,.53-.54l2.15-.83a.94.94,0,0,0,0-1.76l-2.15-.83a.91.91,0,0,1-.53-.54L605,54.06a.91.91,0,0,0-.88-.61Z"/><path class="h" d="M468,100.51v-.24L455.45,46c0-.08-.08-.16-.08-.24v-.08c-.09-.08-.17-.16-.25-.16h0a.28.28,0,0,1-.16-.08L401.67,29.07h-.24a.56.56,0,0,0-.33.09h0c-.08,0-.16.08-.24.16l-40.66,38c-.08.08-.16.16-.16.25v.08c0,.08-.08.16-.08.24h0v.24l12.55,54.27a.28.28,0,0,0,.08.16h0c.08.08.08.16.17.24l.08.08c.08.08.16.08.24.16l53.21,16.2h.24a.32.32,0,0,0,.25-.08h.08c.08,0,.08-.08.16-.08h0l40.74-38,.16-.17h0a.72.72,0,0,0,.08-.4Zm-93.71,21.06,8.91-29.24,51.67,15.79L426,137.36ZM362.23,70.62l19.51,21L373.32,119Zm72.56,35.88L384.26,91l38.63-36.12,8.66,37.66ZM382.72,90.22,361.9,67.87,401.43,31l20.81,22.35Zm53.77,16.44L424.35,53.94l29.72-6.89,12.15,52.73ZM423.62,52.48l-19.52-21,47.46,14.58Zm13,55.88,27.94-6.47-36.29,33.85Z"/></svg>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 813 170.2" style="enable-background:new 0 0 813 170.2;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#2C323D;}
|
||||
.st1{fill:none;stroke:#262B35;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
|
||||
.st2{fill:none;stroke:#575E6A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
|
||||
.st3{fill:none;stroke:#2C323D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
|
||||
.st4{fill:#262B35;}
|
||||
.st5{fill:#373D4A;}
|
||||
.st6{fill:#454C59;}
|
||||
.st7{fill:url(#SVGID_1_);}
|
||||
</style>
|
||||
<title>cubo_doodle</title>
|
||||
<path class="st0" d="M709,49.8L709,49.8l-1.2-5l0,0l0,0l0,0l0,0l-4.9-1.5h-0.1l-3.8,3.5l0,0l0,0l0,0l0,0l0,0l1.2,5l0,0l0,0l0,0l0,0
|
||||
l4.9,1.5h0.1L709,49.8L709,49.8L709,49.8L709,49.8L709,49.8z"/>
|
||||
<path class="st0" d="M320.2,102.5L320.2,102.5l-2.3-10l0,0l0,0c0,0,0,0,0,0l0,0l0,0l-9.9-3h0h-0.1l0,0l0,0l-7.5,7l0,0l0,0l0,0l0,0
|
||||
l0,0l2.3,10l0,0l0,0l0,0l0,0l0,0l9.9,3h0.1l0,0l0,0L320.2,102.5L320.2,102.5L320.2,102.5C320.2,102.5,320.2,102.4,320.2,102.5
|
||||
L320.2,102.5z"/>
|
||||
<path class="st0" d="M481.4,166.7L481.4,166.7l-1.2-4.9l0,0l0,0l0,0l0,0l-4.9-1.5h-0.1l-3.8,3.4l0,0l0,0l0,0l0,0l0,0l1.2,4.9l0,0
|
||||
l0,0l0,0l0,0l4.9,1.5h0.1L481.4,166.7L481.4,166.7L481.4,166.7L481.4,166.7L481.4,166.7z"/>
|
||||
<line class="st1" x1="469.6" y1="1" x2="469.6" y2="16"/>
|
||||
<line class="st1" x1="477.1" y1="8.5" x2="462.1" y2="8.5"/>
|
||||
<line class="st1" x1="807" y1="86.4" x2="807" y2="96.4"/>
|
||||
<line class="st1" x1="812" y1="91.4" x2="802" y2="91.4"/>
|
||||
<line class="st2" x1="191" y1="98.5" x2="191" y2="108.5"/>
|
||||
<line class="st2" x1="196" y1="103.5" x2="186" y2="103.5"/>
|
||||
<line class="st3" x1="662.4" y1="94" x2="655.3" y2="101.1"/>
|
||||
<line class="st3" x1="662.4" y1="101.1" x2="655.3" y2="94"/>
|
||||
<line class="st1" x1="303.8" y1="140.1" x2="296.7" y2="147.1"/>
|
||||
<line class="st1" x1="303.8" y1="147.1" x2="296.7" y2="140.1"/>
|
||||
<path class="st4" d="M566.2,132.1c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S564.5,132.1,566.2,132.1 M566.2,130.1c-2.8,0-5,2.2-5,5
|
||||
s2.2,5,5,5s5-2.2,5-5S568.9,130.1,566.2,130.1z"/>
|
||||
<path class="st0" d="M332.6,32.7c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S331,32.7,332.6,32.7 M332.6,30.7c-2.8,0-5,2.2-5,5
|
||||
s2.2,5,5,5s5-2.2,5-5S335.4,30.7,332.6,30.7z"/>
|
||||
<path class="st0" d="M74.1,56.6c4.4,0,8,3.6,8,8c0,4.4-3.6,8-8,8c-4.4,0-8-3.6-8-8S69.7,56.6,74.1,56.6 M74.1,54.6
|
||||
c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S79.6,54.6,74.1,54.6z"/>
|
||||
<circle class="st5" cx="2" cy="114.8" r="2"/>
|
||||
<path class="st6" d="M524.7,45.4l12.8,3.9l3,13.1l-9.8,9.1l-12.8-3.9l-3-13.1L524.7,45.4 M524.3,43.2L524.3,43.2h-0.2c0,0,0,0-0.1,0
|
||||
l-11.3,10.6c0,0,0,0,0,0.1l0,0c0,0,0,0,0,0.1V54l3.5,15.1l0,0c0,0,0,0,0,0.1l0,0h0.1l14.8,4.5h0.1c0,0,0,0,0.1,0l0,0c0,0,0,0,0,0
|
||||
l11.3-10.5l0,0c0,0,0-0.1,0-0.1v-0.1l-3.5-15.1c0,0,0,0,0-0.1l0,0c0,0,0,0-0.1,0l0,0L524.3,43.2L524.3,43.2z M542.7,63L542.7,63z"/>
|
||||
<path class="st5" d="M264,63.8l2.8,0.9l0.7,2.9l-2.1,2l-2.8-0.8l-0.7-2.9L264,63.8 M263.5,61.6L263.5,61.6l-3.8,3.5l0,0l0,0l0,0l0,0
|
||||
l1.2,5l0,0l0,0l0,0l0,0l4.9,1.5h0.1l0,0l3.8-3.5l0,0V68l-1.2-5l0,0l0,0l0,0l0,0L263.5,61.6L263.5,61.6z M269.6,68.2L269.6,68.2z
|
||||
M269.6,68.2L269.6,68.2z"/>
|
||||
<path class="st5" d="M151.7,37.3L151.7,37.3 M151.1,38.7l0.7,1.8c0.3,0.9,1,1.6,1.9,2l1.8,0.7l-1.8,0.7c-0.9,0.4-1.6,1.1-1.9,2
|
||||
l-0.7,1.8l-0.7-1.8c-0.3-0.9-1-1.6-1.9-2l-1.8-0.7l1.8-0.7c0.9-0.4,1.6-1.1,1.9-2L151.1,38.7 M151.1,35.7c-0.6,0-1.1,0.3-1.3,0.9
|
||||
l-1.2,3.2c-0.1,0.4-0.4,0.7-0.8,0.8l-3.2,1.2c-0.7,0.3-1.1,1.1-0.8,1.8c0.1,0.4,0.4,0.7,0.8,0.8l3.2,1.2c0.4,0.1,0.7,0.4,0.8,0.8
|
||||
l1.2,3.2c0.3,0.7,1.1,1.1,1.8,0.8c0.4-0.1,0.7-0.4,0.8-0.8l1.2-3.2c0.1-0.4,0.4-0.7,0.8-0.8l3.2-1.2c0.7-0.3,1.1-1.1,0.8-1.8
|
||||
c-0.1-0.4-0.4-0.7-0.8-0.8l-3.2-1.2c-0.4-0.1-0.7-0.4-0.8-0.8l-1.2-3.2C152.2,36.1,151.7,35.7,151.1,35.7z"/>
|
||||
<path class="st0" d="M605.1,54.8L605.1,54.8 M604.1,57.3c0.3,0.5,0.7,0.9,1.2,1.2c-0.5,0.3-0.9,0.7-1.2,1.2
|
||||
c-0.3-0.5-0.7-0.9-1.2-1.2C603.4,58.2,603.9,57.8,604.1,57.3 M604.1,53.4c-0.4,0-0.7,0.2-0.9,0.6l-0.8,2.1c-0.1,0.3-0.3,0.4-0.5,0.5
|
||||
l-2.1,0.8c-0.5,0.2-0.7,0.7-0.5,1.2c0.1,0.3,0.3,0.5,0.5,0.5l2.1,0.8c0.2,0.1,0.4,0.3,0.5,0.5l0.8,2.2c0.2,0.5,0.7,0.7,1.2,0.5
|
||||
c0.2-0.1,0.4-0.3,0.5-0.5l0.8-2.2c0.1-0.2,0.3-0.4,0.5-0.5l2.2-0.8c0.5-0.2,0.7-0.7,0.5-1.2c-0.1-0.3-0.3-0.5-0.5-0.5l-2.2-0.8
|
||||
c-0.2-0.1-0.4-0.3-0.5-0.5l-0.9-2.1C604.9,53.7,604.5,53.4,604.1,53.4L604.1,53.4z"/>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="400.9658" y1="-7702.9985" x2="437.0058" y2="-7664.1284" gradientTransform="matrix(1 0 0 1 0 7782.1499)">
|
||||
<stop offset="0" style="stop-color:#22ADF6"/>
|
||||
<stop offset="1" style="stop-color:#9394FF"/>
|
||||
</linearGradient>
|
||||
<path class="st7" d="M460.5,101.5v-0.2L448,47c0-0.1-0.1-0.2-0.1-0.2v-0.1c-0.1-0.1-0.2-0.2-0.2-0.2l0,0c-0.1,0-0.1,0-0.2-0.1
|
||||
L394.2,30h-0.2c-0.1,0-0.2,0-0.3,0.1l0,0c-0.1,0-0.2,0.1-0.2,0.2l-40.7,38c-0.1,0.1-0.2,0.2-0.2,0.2v0.1c0,0.1-0.1,0.2-0.1,0.2l0,0
|
||||
v0.2l12.5,54.3c0,0.1,0,0.1,0.1,0.2l0,0c0.1,0.1,0.1,0.2,0.2,0.2l0.1,0.1c0.1,0.1,0.2,0.1,0.2,0.2l53.2,16.2h0.2
|
||||
c0.1,0,0.2,0,0.2-0.1h0.1c0.1,0,0.1-0.1,0.2-0.1l0,0l40.7-38l0.2-0.2l0,0C460.5,101.8,460.5,101.6,460.5,101.5L460.5,101.5z
|
||||
M366.8,122.5l8.9-29.2l51.7,15.8l-8.9,29.2L366.8,122.5z M354.7,71.6l19.5,21l-8.4,27.4L354.7,71.6z M427.3,107.5L376.8,92
|
||||
l38.6-36.1l8.7,37.7L427.3,107.5z M375.2,91.2l-20.8-22.3L393.9,32l20.8,22.3L375.2,91.2z M429,107.6l-12.1-52.7l29.7-6.9l12.1,52.7
|
||||
L429,107.6z M416.1,53.4l-19.5-21L444.1,47L416.1,53.4z M429.1,109.3l27.9-6.5l-36.3,33.8L429.1,109.3z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 5.5 KiB |
|
|
@ -1 +1,68 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="813" height="170.25" viewBox="0 0 813 170.25"><defs><style>.a{fill:#2c323d;}.b,.c,.d{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.b{stroke:#262b35;}.c{stroke:#575e6a;}.d{stroke:#2c323d;}.e{fill:#262b35;}.f{fill:#373d4a;}.g{fill:#454c59;}.h{fill:url(#a);}</style><linearGradient id="a" x1="408.45" y1="3803.97" x2="444.49" y2="3765.1" gradientTransform="matrix(1, 0, 0, -1, 0, 3882.15)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#22adf6"/><stop offset="1" stop-color="#7ce490"/></linearGradient></defs><title>cubo_doodle_green</title><path class="a" d="M709,49.77v0l-1.16-5v0h0a0,0,0,0,0,0,0h0l-4.94-1.52h-.07L699,46.7v0h0s0,0,0,0h0v0l1.16,5h0l0,0h0l0,0,4.92,1.5h.07L709,49.83v0h0s0,0,0,0Z"/><path class="a" d="M320.22,102.48v0l-2.33-10s0,0,0,0h0s0,0-.05,0h0l0,0-9.86-3h-.05l-.06,0h0a.05.05,0,0,0,0,0l-7.53,7s0,0,0,0v0s0,0,0,0h0v0l2.32,10a0,0,0,0,0,0,0h0a.13.13,0,0,0,0,0h0l0,0,9.85,3h.1s0,0,0,0h0l7.54-7,0,0h0a.1.1,0,0,0,0-.07Z"/><path class="a" d="M481.38,166.74v0l-1.16-4.92v0h0l0,0h0l-4.93-1.49h-.08l-3.76,3.45a0,0,0,0,0,0,0h0v0h0v0l1.16,4.92v0h0s0,0,0,0h0l4.93,1.47h.07l3.77-3.45v0h0a0,0,0,0,0,0,0Z"/><line class="b" x1="479.62" y1="1" x2="479.62" y2="16"/><line class="b" x1="487.12" y1="8.5" x2="472.12" y2="8.5"/><line class="b" x1="807" y1="86.41" x2="807" y2="96.41"/><line class="b" x1="812" y1="91.41" x2="802" y2="91.41"/><line class="c" x1="191" y1="98.47" x2="191" y2="108.47"/><line class="c" x1="196" y1="103.47" x2="186" y2="103.47"/><line class="d" x1="662.4" y1="94.02" x2="655.32" y2="101.09"/><line class="d" x1="662.4" y1="101.09" x2="655.32" y2="94.02"/><line class="b" x1="303.75" y1="140.06" x2="296.68" y2="147.13"/><line class="b" x1="303.75" y1="147.13" x2="296.68" y2="140.06"/><path class="e" d="M566.18,132.06a3,3,0,1,1-3,3,3,3,0,0,1,3-3m0-2a5,5,0,1,0,5,5,5,5,0,0,0-5-5Z"/><path class="a" d="M332.61,32.66a3,3,0,1,1-3,3,3,3,0,0,1,3-3m0-2a5,5,0,1,0,5,5,5,5,0,0,0-5-5Z"/><path class="a" d="M74.08,56.63a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-2a10,10,0,1,0,10,10,10,10,0,0,0-10-10Z"/><circle class="f" cx="2" cy="114.84" r="2"/><path class="g" d="M525.47,44.64h0m-.79.74,12.81,3.93,3,13.08-9.81,9.14-12.81-3.9-3-13.09,9.8-9.16m-.4-2.22h-.07l-.09,0s0,0-.07,0L512.77,53.78s0,0,0,.06v0s0,0,0,.06V54l3.48,15.07s0,0,0,0,0,0,0,.07l0,0,.07,0,14.78,4.5h.06s.05,0,.07,0h0s0,0,.05,0l11.31-10.55,0,0a.23.23,0,0,0,0-.11v-.07l-3.49-15.07s0,0,0-.07v0a.13.13,0,0,0-.07,0s0,0,0,0l-14.8-4.54ZM542.7,63Zm0,0h0Z"/><path class="f" d="M264,63.84l2.79.86.67,2.86-2.15,2-2.79-.85-.67-2.87,2.15-2m-.48-2.24h-.08l-3.76,3.52,0,0h0s0,0,0,0v0l1.17,5h0l0,0h0s0,0,0,0l4.92,1.5h.06a0,0,0,0,1,0,0l3.77-3.51,0,0v-.06l-1.16-5a0,0,0,0,0,0,0h0l0,0h0l-4.93-1.52Zm6.13,6.61h0Zm0,0h0Z"/><path class="f" d="M151.67,37.29h0m-.54,1.41.7,1.81a3.4,3.4,0,0,0,1.95,2l1.81.7-1.81.7a3.4,3.4,0,0,0-1.95,2l-.7,1.82-.71-1.82a3.4,3.4,0,0,0-1.95-2l-1.81-.7,1.81-.7a3.4,3.4,0,0,0,1.95-2l.71-1.81m0-3a1.38,1.38,0,0,0-1.32.9l-1.25,3.23a1.42,1.42,0,0,1-.81.8l-3.22,1.25a1.41,1.41,0,0,0,0,2.64l3.22,1.25a1.43,1.43,0,0,1,.81.81l1.25,3.22a1.41,1.41,0,0,0,2.63,0l1.25-3.22a1.43,1.43,0,0,1,.81-.81l3.22-1.25a1.41,1.41,0,0,0,0-2.64l-3.22-1.25a1.42,1.42,0,0,1-.81-.8l-1.25-3.23a1.38,1.38,0,0,0-1.31-.9Z"/><path class="a" d="M605.13,54.78h0m-1,2.48a3,3,0,0,0,1.2,1.19,3,3,0,0,0-1.2,1.2,2.93,2.93,0,0,0-1.19-1.2,2.9,2.9,0,0,0,1.19-1.19m0-3.81a.91.91,0,0,0-.87.61l-.84,2.14a.9.9,0,0,1-.54.54l-2.14.83a.94.94,0,0,0,0,1.76l2.14.83a1,1,0,0,1,.54.54l.84,2.15a.94.94,0,0,0,1.75,0l.84-2.15a1,1,0,0,1,.53-.54l2.15-.83a.94.94,0,0,0,0-1.76l-2.15-.83a.91.91,0,0,1-.53-.54L605,54.06a.91.91,0,0,0-.88-.61Z"/><path class="h" d="M468,100.51v-.24L455.45,46c0-.08-.08-.16-.08-.24v-.08c-.09-.08-.17-.16-.25-.16h0a.28.28,0,0,1-.16-.08L401.67,29.07h-.24a.56.56,0,0,0-.33.09h0c-.08,0-.16.08-.24.16l-40.66,38c-.08.08-.16.16-.16.25v.08c0,.08-.08.16-.08.24h0v.24l12.55,54.27a.28.28,0,0,0,.08.16h0c.08.08.08.16.17.24l.08.08c.08.08.16.08.24.16l53.21,16.2h.24a.32.32,0,0,0,.25-.08h.08c.08,0,.08-.08.16-.08h0l40.74-38,.16-.17h0a.72.72,0,0,0,.08-.4Zm-93.71,21.06,8.91-29.24,51.67,15.79L426,137.36ZM362.23,70.62l19.51,21L373.32,119Zm72.56,35.88L384.26,91l38.63-36.12,8.66,37.66ZM382.72,90.22,361.9,67.87,401.43,31l20.81,22.35Zm53.77,16.44L424.35,53.94l29.72-6.89,12.15,52.73ZM423.62,52.48l-19.52-21,47.46,14.58Zm13,55.88,27.94-6.47-36.29,33.85Z"/></svg>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 813 170.2" style="enable-background:new 0 0 813 170.2;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#2C323D;}
|
||||
.st1{fill:none;stroke:#262B35;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
|
||||
.st2{fill:none;stroke:#575E6A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
|
||||
.st3{fill:none;stroke:#2C323D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
|
||||
.st4{fill:#262B35;}
|
||||
.st5{fill:#373D4A;}
|
||||
.st6{fill:#454C59;}
|
||||
.st7{fill:url(#SVGID_1_);}
|
||||
</style>
|
||||
<title>cubo_doodle_green</title>
|
||||
<path class="st0" d="M709,49.8L709,49.8l-1.2-5l0,0l0,0l0,0l0,0l-4.9-1.5h-0.1l-3.8,3.5l0,0l0,0l0,0l0,0l0,0l1.2,5l0,0l0,0l0,0l0,0
|
||||
l4.9,1.5h0.1L709,49.8L709,49.8L709,49.8L709,49.8L709,49.8z"/>
|
||||
<path class="st0" d="M320.2,102.5L320.2,102.5l-2.3-10l0,0l0,0c0,0,0,0,0,0l0,0l0,0l-9.9-3h0h-0.1l0,0l0,0l-7.5,7l0,0l0,0l0,0l0,0
|
||||
l0,0l2.3,10l0,0l0,0l0,0l0,0l0,0l9.9,3h0.1l0,0l0,0L320.2,102.5L320.2,102.5L320.2,102.5C320.2,102.5,320.2,102.4,320.2,102.5
|
||||
L320.2,102.5z"/>
|
||||
<path class="st0" d="M481.4,166.7L481.4,166.7l-1.2-4.9l0,0l0,0l0,0l0,0l-4.9-1.5h-0.1l-3.8,3.4l0,0l0,0l0,0l0,0l0,0l1.2,4.9l0,0
|
||||
l0,0l0,0l0,0l4.9,1.5h0.1L481.4,166.7L481.4,166.7L481.4,166.7L481.4,166.7L481.4,166.7z"/>
|
||||
<line class="st1" x1="469.6" y1="1" x2="469.6" y2="16"/>
|
||||
<line class="st1" x1="477.1" y1="8.5" x2="462.1" y2="8.5"/>
|
||||
<line class="st1" x1="807" y1="86.4" x2="807" y2="96.4"/>
|
||||
<line class="st1" x1="812" y1="91.4" x2="802" y2="91.4"/>
|
||||
<line class="st2" x1="191" y1="98.5" x2="191" y2="108.5"/>
|
||||
<line class="st2" x1="196" y1="103.5" x2="186" y2="103.5"/>
|
||||
<line class="st3" x1="662.4" y1="94" x2="655.3" y2="101.1"/>
|
||||
<line class="st3" x1="662.4" y1="101.1" x2="655.3" y2="94"/>
|
||||
<line class="st1" x1="303.8" y1="140.1" x2="296.7" y2="147.1"/>
|
||||
<line class="st1" x1="303.8" y1="147.1" x2="296.7" y2="140.1"/>
|
||||
<path class="st4" d="M566.2,132.1c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S564.5,132.1,566.2,132.1 M566.2,130.1c-2.8,0-5,2.2-5,5
|
||||
s2.2,5,5,5s5-2.2,5-5S568.9,130.1,566.2,130.1z"/>
|
||||
<path class="st0" d="M332.6,32.7c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S331,32.7,332.6,32.7 M332.6,30.7c-2.8,0-5,2.2-5,5
|
||||
s2.2,5,5,5s5-2.2,5-5S335.4,30.7,332.6,30.7z"/>
|
||||
<path class="st0" d="M74.1,56.6c4.4,0,8,3.6,8,8c0,4.4-3.6,8-8,8c-4.4,0-8-3.6-8-8S69.7,56.6,74.1,56.6 M74.1,54.6
|
||||
c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S79.6,54.6,74.1,54.6z"/>
|
||||
<circle class="st5" cx="2" cy="114.8" r="2"/>
|
||||
<path class="st6" d="M525.5,44.6L525.5,44.6 M524.7,45.4l12.8,3.9l3,13.1l-9.8,9.1l-12.8-3.9l-3-13.1L524.7,45.4 M524.3,43.2
|
||||
L524.3,43.2h-0.2c0,0,0,0-0.1,0l-11.3,10.6c0,0,0,0,0,0.1l0,0c0,0,0,0,0,0.1V54l3.5,15.1l0,0c0,0,0,0,0,0.1l0,0h0.1l14.8,4.5h0.1
|
||||
c0,0,0,0,0.1,0l0,0c0,0,0,0,0,0l11.3-10.5l0,0c0,0,0-0.1,0-0.1v-0.1l-3.5-15.1c0,0,0,0,0-0.1l0,0c0,0,0,0-0.1,0l0,0L524.3,43.2
|
||||
L524.3,43.2z M542.7,63L542.7,63z"/>
|
||||
<path class="st5" d="M264,63.8l2.8,0.9l0.7,2.9l-2.1,2l-2.8-0.8l-0.7-2.9L264,63.8 M263.5,61.6L263.5,61.6l-3.8,3.5l0,0l0,0l0,0l0,0
|
||||
l1.2,5l0,0l0,0l0,0l0,0l4.9,1.5h0.1l0,0l3.8-3.5l0,0V68l-1.2-5l0,0l0,0l0,0l0,0L263.5,61.6L263.5,61.6z M269.6,68.2L269.6,68.2z
|
||||
M269.6,68.2L269.6,68.2z"/>
|
||||
<path class="st5" d="M151.7,37.3L151.7,37.3 M151.1,38.7l0.7,1.8c0.3,0.9,1,1.6,1.9,2l1.8,0.7l-1.8,0.7c-0.9,0.4-1.6,1.1-1.9,2
|
||||
l-0.7,1.8l-0.7-1.8c-0.3-0.9-1-1.6-1.9-2l-1.8-0.7l1.8-0.7c0.9-0.4,1.6-1.1,1.9-2L151.1,38.7 M151.1,35.7c-0.6,0-1.1,0.3-1.3,0.9
|
||||
l-1.2,3.2c-0.1,0.4-0.4,0.7-0.8,0.8l-3.2,1.2c-0.7,0.3-1.1,1.1-0.8,1.8c0.1,0.4,0.4,0.7,0.8,0.8l3.2,1.2c0.4,0.1,0.7,0.4,0.8,0.8
|
||||
l1.2,3.2c0.3,0.7,1.1,1.1,1.8,0.8c0.4-0.1,0.7-0.4,0.8-0.8l1.2-3.2c0.1-0.4,0.4-0.7,0.8-0.8l3.2-1.2c0.7-0.3,1.1-1.1,0.8-1.8
|
||||
c-0.1-0.4-0.4-0.7-0.8-0.8l-3.2-1.2c-0.4-0.1-0.7-0.4-0.8-0.8l-1.2-3.2C152.2,36.1,151.7,35.7,151.1,35.7z"/>
|
||||
<path class="st0" d="M605.1,54.8L605.1,54.8 M604.1,57.3c0.3,0.5,0.7,0.9,1.2,1.2c-0.5,0.3-0.9,0.7-1.2,1.2
|
||||
c-0.3-0.5-0.7-0.9-1.2-1.2C603.4,58.2,603.9,57.8,604.1,57.3 M604.1,53.4c-0.4,0-0.7,0.2-0.9,0.6l-0.8,2.1c-0.1,0.3-0.3,0.4-0.5,0.5
|
||||
l-2.1,0.8c-0.5,0.2-0.7,0.7-0.5,1.2c0.1,0.3,0.3,0.5,0.5,0.5l2.1,0.8c0.2,0.1,0.4,0.3,0.5,0.5l0.8,2.2c0.2,0.5,0.7,0.7,1.2,0.5
|
||||
c0.2-0.1,0.4-0.3,0.5-0.5l0.8-2.2c0.1-0.2,0.3-0.4,0.5-0.5l2.2-0.8c0.5-0.2,0.7-0.7,0.5-1.2c-0.1-0.3-0.3-0.5-0.5-0.5l-2.2-0.8
|
||||
c-0.2-0.1-0.4-0.3-0.5-0.5l-0.9-2.1C604.9,53.7,604.5,53.4,604.1,53.4L604.1,53.4z"/>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="400.9659" y1="-3702.9983" x2="437.0059" y2="-3664.1284" gradientTransform="matrix(1 0 0 1 0 3782.1499)">
|
||||
<stop offset="0" style="stop-color:#22ADF6"/>
|
||||
<stop offset="1" style="stop-color:#7CE490"/>
|
||||
</linearGradient>
|
||||
<path class="st7" d="M460.5,101.5v-0.2L448,47c0-0.1-0.1-0.2-0.1-0.2v-0.1c-0.1-0.1-0.2-0.2-0.2-0.2l0,0c-0.1,0-0.1,0-0.2-0.1
|
||||
L394.2,30h-0.2c-0.1,0-0.2,0-0.3,0.1l0,0c-0.1,0-0.2,0.1-0.2,0.2l-40.7,38c-0.1,0.1-0.2,0.2-0.2,0.2v0.1c0,0.1-0.1,0.2-0.1,0.2l0,0
|
||||
v0.2l12.5,54.3c0,0.1,0,0.1,0.1,0.2l0,0c0.1,0.1,0.1,0.2,0.2,0.2l0.1,0.1c0.1,0.1,0.2,0.1,0.2,0.2l53.2,16.2h0.2
|
||||
c0.1,0,0.2,0,0.2-0.1h0.1c0.1,0,0.1-0.1,0.2-0.1l0,0l40.7-38l0.2-0.2l0,0C460.5,101.8,460.5,101.6,460.5,101.5L460.5,101.5z
|
||||
M366.8,122.5l8.9-29.2l51.7,15.8l-8.9,29.2L366.8,122.5z M354.7,71.6l19.5,21l-8.4,27.4L354.7,71.6z M427.3,107.5L376.8,92
|
||||
l38.6-36.1l8.7,37.7L427.3,107.5z M375.2,91.2l-20.8-22.3L393.9,32l20.8,22.3L375.2,91.2z M429,107.6l-12.1-52.7l29.7-6.9l12.1,52.7
|
||||
L429,107.6z M416.1,53.4l-19.5-21L444.1,47L416.1,53.4z M429.1,109.3l27.9-6.5l-36.3,33.8L429.1,109.3z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 5.5 KiB |
|
|
@ -9,19 +9,22 @@
|
|||
align-items: center;
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wizard--progress-icon {
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border-radius: 50%;
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-radius: 13px;
|
||||
background-color: $g2-kevlar;
|
||||
opacity: 0;
|
||||
display: inline-flex;
|
||||
margin-right: $ix-marg-b;
|
||||
margin-right: 0;
|
||||
flex-shrink: 0;
|
||||
color: $g7-graphite;
|
||||
transition: background-color .4s;
|
||||
transition: opacity .4s ease-in-out, width .4s ease-in-out, height .4s ease-in-out;
|
||||
|
||||
> .icon {
|
||||
position: absolute;
|
||||
|
|
@ -50,8 +53,8 @@
|
|||
.wizard--progress-title {
|
||||
font-weight: 700;
|
||||
color: $g7-graphite;
|
||||
font-size: 15px;
|
||||
transition: color .4s;
|
||||
font-size: $ix-text-base;
|
||||
transition: color .4s ease-in-out, font-size .4s ease-in-out;
|
||||
}
|
||||
|
||||
.wizard--progress-title.checkmark {
|
||||
|
|
@ -75,7 +78,8 @@
|
|||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0 $ix-marg-a;
|
||||
flex-shrink: 0;
|
||||
flex-shrink: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wizard--progress-button:hover {
|
||||
|
|
@ -123,3 +127,21 @@
|
|||
.wizard--progress-connector--full:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $grid--breakpoint-md) {
|
||||
.wizard--progress-title {
|
||||
font-size: $ix-text-base-1;
|
||||
}
|
||||
|
||||
.wizard--progress-button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wizard--progress-icon {
|
||||
font-size: $ix-text-base;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
opacity: 1;
|
||||
margin-right: $ix-marg-b;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,12 +7,14 @@
|
|||
position: relative;
|
||||
background-color: $g0-obsidian;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
padding: 0 $ix-marg-c;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: $radius;
|
||||
transition: height .4s ease-in-out;
|
||||
}
|
||||
|
||||
.wizard--progress-skip {
|
||||
|
|
@ -23,3 +25,9 @@
|
|||
.wizard--progress-header.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $grid--breakpoint-sm) {
|
||||
.wizard--progress-header {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,37 @@
|
|||
------------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.wizard--bookend-step {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
margin: 0 $ix-marg-a;
|
||||
}
|
||||
}
|
||||
|
||||
.splash-logo {
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
flex: .5;
|
||||
|
||||
&.primary {
|
||||
background-image: url('../../assets/images/cubo_doodle.svg');
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-image: url('../../assets/images/cubo_doodle_green.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-contents {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
|
@ -25,7 +56,7 @@
|
|||
text-align: center;
|
||||
background-color: $g3-castle;
|
||||
border-radius: $radius;
|
||||
padding: 20px;
|
||||
padding: $ix-marg-c $ix-marg-c ($ix-marg-d * 2 + 38px) $ix-marg-c;
|
||||
flex: 1 0 100%;
|
||||
transition: flex 0.4s ease;
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
|
@ -37,13 +68,21 @@
|
|||
|
||||
.wizard--button-container {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
right: 30px;
|
||||
bottom: $ix-marg-d;
|
||||
left: $ix-marg-c;
|
||||
right: $ix-marg-c;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.wizard--skip-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
.wizard--skip-container {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
||||
.button {
|
||||
margin: $ix-marg-b 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -51,12 +90,11 @@
|
|||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
flex-wrap: nowrap;
|
||||
flex: 2;
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
|
|
@ -65,35 +103,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
.splash-logo {
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
margin: auto auto;
|
||||
|
||||
&.primary {
|
||||
background-image: url('../../assets/images/cubo_doodle.svg');
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-image: url('../../assets/images/cubo_doodle_green.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-step--title {
|
||||
font-size: 32px;
|
||||
font-weight: 300;
|
||||
color: $g15-platinum;
|
||||
margin-top: 32px;
|
||||
margin-top: $ix-marg-d;
|
||||
margin-bottom: $ix-marg-b;
|
||||
@include no-user-select();
|
||||
}
|
||||
|
||||
.wizard-step--sub-title {
|
||||
margin-top: $ix-marg-b;
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: $ix-marg-d;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: $g11-sidewalk;
|
||||
|
|
@ -138,10 +159,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wizard-step--body-snippet {
|
||||
background-color: $g3-castle;
|
||||
border-radius: $radius;
|
||||
margin: $ix-marg-a 0;
|
||||
padding: $ix-marg-b;
|
||||
overflow-x: auto;
|
||||
font-family: 'RobotoMono', monospace;
|
||||
}
|
||||
|
||||
.wizard-step--body-copybutton{
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.wizard-step--lp-body {
|
||||
height: 280px;
|
||||
width: 750px;
|
||||
margin: 10px auto 0px auto;
|
||||
flex-shrink: 1;
|
||||
width: 100%;
|
||||
margin: $ix-marg-c auto 0 auto;
|
||||
}
|
||||
|
||||
.wizard-step--top-container {
|
||||
|
|
@ -150,7 +185,7 @@
|
|||
max-width: 750px;
|
||||
margin: 10px auto 0 auto;
|
||||
border-radius: $radius;
|
||||
background-color: #202028;
|
||||
background-color: $g2-kevlar;
|
||||
transition: background-color 0.25s ease, border-color 0.25s ease;
|
||||
}
|
||||
|
||||
|
|
@ -170,7 +205,6 @@
|
|||
border-radius: $radius;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
max-width: 750px;
|
||||
margin-top: 10px;
|
||||
background-color: $g6-smoke;
|
||||
text-align: center;
|
||||
|
|
@ -190,16 +224,19 @@
|
|||
|
||||
.onboarding-step {
|
||||
width: 100%;
|
||||
max-width: 60vw;
|
||||
max-height: calc(100% - 68px);
|
||||
max-height: 100%;
|
||||
text-align: center;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: 0 auto 60px auto;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
transition: max-width .4s ease-in-out;
|
||||
}
|
||||
|
||||
.wizard--skippable {
|
||||
margin-bottom: $ix-marg-a + 38px;
|
||||
}
|
||||
|
||||
.wizard-step--grid-container {
|
||||
|
|
@ -211,4 +248,43 @@
|
|||
.wizard-step--filter {
|
||||
float:right;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $grid--breakpoint-md) {
|
||||
.wizard-step--container {
|
||||
padding: $ix-marg-d $ix-marg-d ($ix-marg-d * 2 + 38px) $ix-marg-d;
|
||||
}
|
||||
|
||||
.wizard--skippable {
|
||||
margin-bottom: 0;
|
||||
|
||||
.wizard--button-container::before {
|
||||
content: "";
|
||||
flex: 1;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard--button-container {
|
||||
left: $ix-marg-d;
|
||||
right: $ix-marg-d;
|
||||
|
||||
.wizard--skip-container {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
|
||||
.button {
|
||||
margin: 0 0 0 $ix-marg-a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding-step {
|
||||
max-width: 60vw;
|
||||
}
|
||||
|
||||
.wizard--bookend-step {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
|
@ -65,7 +65,11 @@ class AdminStep extends PureComponent<OnboardingStepProps, State> {
|
|||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column widthXS={Columns.Ten} offsetXS={Columns.One}>
|
||||
<Grid.Column
|
||||
widthXS={Columns.Twelve}
|
||||
widthMD={Columns.Ten}
|
||||
offsetMD={Columns.One}
|
||||
>
|
||||
<Form.Element label="Admin Username">
|
||||
<Input
|
||||
value={username}
|
||||
|
|
@ -79,7 +83,11 @@ class AdminStep extends PureComponent<OnboardingStepProps, State> {
|
|||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
<Grid.Column widthXS={Columns.Five} offsetXS={Columns.One}>
|
||||
<Grid.Column
|
||||
widthXS={Columns.Six}
|
||||
widthMD={Columns.Five}
|
||||
offsetMD={Columns.One}
|
||||
>
|
||||
<Form.Element label="Admin Password">
|
||||
<Input
|
||||
type={InputType.Password}
|
||||
|
|
@ -93,7 +101,7 @@ class AdminStep extends PureComponent<OnboardingStepProps, State> {
|
|||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
<Grid.Column widthXS={Columns.Five}>
|
||||
<Grid.Column widthXS={Columns.Six} widthMD={Columns.Five}>
|
||||
<Form.Element label="Confirm Admin Password">
|
||||
<Input
|
||||
type={InputType.Password}
|
||||
|
|
@ -107,7 +115,11 @@ class AdminStep extends PureComponent<OnboardingStepProps, State> {
|
|||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
<Grid.Column widthXS={Columns.Ten} offsetXS={Columns.One}>
|
||||
<Grid.Column
|
||||
widthXS={Columns.Twelve}
|
||||
widthMD={Columns.Ten}
|
||||
offsetMD={Columns.One}
|
||||
>
|
||||
<Form.Element label="Default Organization Name">
|
||||
<Input
|
||||
value={org}
|
||||
|
|
@ -121,7 +133,11 @@ class AdminStep extends PureComponent<OnboardingStepProps, State> {
|
|||
/>
|
||||
</Form.Element>
|
||||
</Grid.Column>
|
||||
<Grid.Column widthXS={Columns.Ten} offsetXS={Columns.One}>
|
||||
<Grid.Column
|
||||
widthXS={Columns.Twelve}
|
||||
widthMD={Columns.Ten}
|
||||
offsetMD={Columns.One}
|
||||
>
|
||||
<Form.Element label="Default Bucket Name">
|
||||
<Input
|
||||
value={bucket}
|
||||
|
|
|
|||
|
|
@ -22,11 +22,11 @@ class CompletionStep extends PureComponent<OnboardingStepProps> {
|
|||
const {onExit, onDecrementCurrentStepIndex} = this.props
|
||||
|
||||
return (
|
||||
<div className="onboarding-step">
|
||||
<div className="wizard--bookend-step">
|
||||
<div className="splash-logo secondary" />
|
||||
<h3 className="wizard-step--title">Setup Complete!</h3>
|
||||
<h5 className="wizard-step--sub-title" />
|
||||
<div className="wizard--button-bar">
|
||||
<div>
|
||||
<Button
|
||||
color={ComponentColor.Default}
|
||||
text="Back to Verify"
|
||||
|
|
|
|||
|
|
@ -12,20 +12,18 @@ import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard'
|
|||
class InitStep extends PureComponent<OnboardingStepProps> {
|
||||
public render() {
|
||||
return (
|
||||
<div className="onboarding-step">
|
||||
<div className="wizard--bookend-step">
|
||||
<div className="splash-logo primary" />
|
||||
<h3 className="wizard-step--title">Welcome to InfluxDB 2.0</h3>
|
||||
<h5 className="wizard-step--sub-title">
|
||||
Get started in just a few easy steps
|
||||
</h5>
|
||||
<div className="wizard--button-bar">
|
||||
<Button
|
||||
color={ComponentColor.Primary}
|
||||
text="Get Started"
|
||||
size={ComponentSize.Large}
|
||||
onClick={this.handleNext}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
color={ComponentColor.Primary}
|
||||
text="Get Started"
|
||||
size={ComponentSize.Large}
|
||||
onClick={this.handleNext}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,14 +91,16 @@ class OnboardingButtons extends PureComponent<Props> {
|
|||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
customClass="wizard--skip-button"
|
||||
size={ComponentSize.Medium}
|
||||
color={ComponentColor.Default}
|
||||
text={skipButtonText}
|
||||
onClick={onClickSkip}
|
||||
data-test="skip"
|
||||
/>
|
||||
<div className="wizard--skip-container">
|
||||
<Button
|
||||
customClass="wizard--skip-button"
|
||||
size={ComponentSize.Medium}
|
||||
color={ComponentColor.Default}
|
||||
text={skipButtonText}
|
||||
onClick={onClickSkip}
|
||||
data-test="skip"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,9 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
|
|||
<Grid>
|
||||
<GridRow>
|
||||
<GridColumn
|
||||
offsetXS={1}
|
||||
widthXS={10}
|
||||
offsetMD={1}
|
||||
widthMD={10}
|
||||
widthXS={12}
|
||||
>
|
||||
<FormElement
|
||||
label="Admin Username"
|
||||
|
|
@ -44,8 +45,9 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
|
|||
</FormElement>
|
||||
</GridColumn>
|
||||
<GridColumn
|
||||
offsetXS={1}
|
||||
widthXS={5}
|
||||
offsetMD={1}
|
||||
widthMD={5}
|
||||
widthXS={6}
|
||||
>
|
||||
<FormElement
|
||||
label="Admin Password"
|
||||
|
|
@ -68,7 +70,8 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
|
|||
</FormElement>
|
||||
</GridColumn>
|
||||
<GridColumn
|
||||
widthXS={5}
|
||||
widthMD={5}
|
||||
widthXS={6}
|
||||
>
|
||||
<FormElement
|
||||
label="Confirm Admin Password"
|
||||
|
|
@ -91,8 +94,9 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
|
|||
</FormElement>
|
||||
</GridColumn>
|
||||
<GridColumn
|
||||
offsetXS={1}
|
||||
widthXS={10}
|
||||
offsetMD={1}
|
||||
widthMD={10}
|
||||
widthXS={12}
|
||||
>
|
||||
<FormElement
|
||||
label="Default Organization Name"
|
||||
|
|
@ -114,8 +118,9 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
|
|||
</FormElement>
|
||||
</GridColumn>
|
||||
<GridColumn
|
||||
offsetXS={1}
|
||||
widthXS={10}
|
||||
offsetMD={1}
|
||||
widthMD={10}
|
||||
widthXS={12}
|
||||
>
|
||||
<FormElement
|
||||
label="Default Bucket Name"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
exports[`Onboarding.Components.CompletionStep renders 1`] = `
|
||||
<div
|
||||
className="onboarding-step"
|
||||
className="wizard--bookend-step"
|
||||
>
|
||||
<div
|
||||
className="splash-logo secondary"
|
||||
|
|
@ -15,9 +15,7 @@ exports[`Onboarding.Components.CompletionStep renders 1`] = `
|
|||
<h5
|
||||
className="wizard-step--sub-title"
|
||||
/>
|
||||
<div
|
||||
className="wizard--button-bar"
|
||||
>
|
||||
<div>
|
||||
<Button
|
||||
active={false}
|
||||
color="default"
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
|
|||
} = this.props
|
||||
|
||||
return (
|
||||
<div className="onboarding-step">
|
||||
<div className="onboarding-step wizard--skippable">
|
||||
<ConfigureDataSourceSwitcher
|
||||
bucket={_.get(setupParams, 'bucket', '')}
|
||||
org={_.get(setupParams, 'org', '')}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@ import TabBody from 'src/onboarding/components/configureStep/lineProtocol/TabBod
|
|||
// Types
|
||||
import {LineProtocolTab} from 'src/types/v2/dataLoaders'
|
||||
|
||||
// Components
|
||||
import {Grid, Columns} from 'src/clockface'
|
||||
|
||||
// Actions
|
||||
import {
|
||||
setLineProtocolBody,
|
||||
|
|
@ -78,23 +81,29 @@ export class LineProtocolTabs extends PureComponent<Props, State> {
|
|||
onClick={this.handleTabClick}
|
||||
/>
|
||||
|
||||
<div className="onboarding--admin-user-form">
|
||||
<div className={'wizard-step--lp-body'}>
|
||||
<TabBody
|
||||
onURLChange={this.handleURLChange}
|
||||
activeLPTab={activeLPTab}
|
||||
precision={precision}
|
||||
urlInput={urlInput}
|
||||
lineProtocolBody={lineProtocolBody}
|
||||
setLineProtocolBody={setLineProtocolBody}
|
||||
/>
|
||||
</div>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column widthXS={Columns.Twelve}>
|
||||
<div className="onboarding--admin-user-form">
|
||||
<div className={'wizard-step--lp-body'}>
|
||||
<TabBody
|
||||
onURLChange={this.handleURLChange}
|
||||
activeLPTab={activeLPTab}
|
||||
precision={precision}
|
||||
urlInput={urlInput}
|
||||
lineProtocolBody={lineProtocolBody}
|
||||
setLineProtocolBody={setLineProtocolBody}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PrecisionDropdown
|
||||
setPrecision={setPrecision}
|
||||
precision={precision}
|
||||
/>
|
||||
</div>
|
||||
<PrecisionDropdown
|
||||
setPrecision={setPrecision}
|
||||
precision={precision}
|
||||
/>
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,18 +12,26 @@ exports[`LineProtocolTabs rendering renders! 1`] = `
|
|||
]
|
||||
}
|
||||
/>
|
||||
<div
|
||||
className="onboarding--admin-user-form"
|
||||
>
|
||||
<div
|
||||
className="wizard-step--lp-body"
|
||||
>
|
||||
<default_1
|
||||
onURLChange={[Function]}
|
||||
urlInput=""
|
||||
/>
|
||||
</div>
|
||||
<PrecisionDropdown />
|
||||
</div>
|
||||
<Grid>
|
||||
<GridRow>
|
||||
<GridColumn
|
||||
widthXS={12}
|
||||
>
|
||||
<div
|
||||
className="onboarding--admin-user-form"
|
||||
>
|
||||
<div
|
||||
className="wizard-step--lp-body"
|
||||
>
|
||||
<default_1
|
||||
onURLChange={[Function]}
|
||||
urlInput=""
|
||||
/>
|
||||
</div>
|
||||
<PrecisionDropdown />
|
||||
</div>
|
||||
</GridColumn>
|
||||
</GridRow>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import React, {PureComponent} from 'react'
|
||||
import {withRouter, WithRouterProps} from 'react-router'
|
||||
import _ from 'lodash'
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Components
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
|
@ -69,7 +70,7 @@ export class SelectDataSourceStep extends PureComponent<Props, State> {
|
|||
|
||||
public render() {
|
||||
return (
|
||||
<Form onSubmit={this.handleClickNext}>
|
||||
<Form onSubmit={this.handleClickNext} className={this.skippableClassName}>
|
||||
<div className="onboarding-step">
|
||||
<h3 className="wizard-step--title">{this.title}</h3>
|
||||
<h5 className="wizard-step--sub-title">
|
||||
|
|
@ -257,6 +258,18 @@ export class SelectDataSourceStep extends PureComponent<Props, State> {
|
|||
private get isStreaming(): boolean {
|
||||
return this.props.params.substepID === 'streaming'
|
||||
}
|
||||
|
||||
private get skippableClassName(): string {
|
||||
const {telegrafPlugins} = this.props
|
||||
const pluginsSelected = telegrafPlugins.length > 0
|
||||
const allConfigured = telegrafPlugins.every(
|
||||
plugin => plugin.configured === 'configured'
|
||||
)
|
||||
|
||||
return classnames('onboarding-step', {
|
||||
'wizard--skippable': pluginsSelected && allConfigured,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter<OwnProps>(SelectDataSourceStep)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
|
||||
@import 'src/style/modules';
|
||||
|
||||
$sidebar-width: 240px;
|
||||
$sidebar-width-sm: 140px;
|
||||
$sidebar-width-md: 240px;
|
||||
|
||||
.side-bar {
|
||||
@include no-user-select();
|
||||
|
|
@ -15,21 +16,19 @@ $sidebar-width: 240px;
|
|||
transition: flex 0.4s ease;
|
||||
|
||||
&.show {
|
||||
flex: 1 0 $sidebar-width
|
||||
flex: 1 0 $sidebar-width-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.side-bar--container {
|
||||
box-sizing: border-box;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
height: 100%;
|
||||
width: $sidebar-width;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: $ix-marg-d;
|
||||
padding-top: $ix-marg-d * 2;
|
||||
padding-right: 0;
|
||||
padding: $ix-marg-e 0 34px 0;
|
||||
}
|
||||
|
||||
.side-bar.show .side-bar--container {
|
||||
|
|
@ -37,9 +36,9 @@ $sidebar-width: 240px;
|
|||
}
|
||||
|
||||
.side-bar--title {
|
||||
margin: 0;
|
||||
margin-bottom: $ix-marg-d;
|
||||
margin: 0 $ix-marg-c $ix-marg-c $ix-marg-c;
|
||||
color: $g13-mist;
|
||||
font-size: $ix-text-base-1;
|
||||
}
|
||||
|
||||
.side-bar--contents {
|
||||
|
|
@ -62,7 +61,7 @@ $sidebar-width: 240px;
|
|||
border-radius: $radius 0 0 $radius;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding-left: 13px;
|
||||
margin-left: $ix-marg-c;
|
||||
color: $g10-wolf;
|
||||
background-color: transparent;
|
||||
white-space: nowrap;
|
||||
|
|
@ -85,7 +84,7 @@ $sidebar-width: 240px;
|
|||
color: $g7-graphite;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin-right: 13px;
|
||||
margin: 0 13px;
|
||||
transition: color 0.25s ease;
|
||||
|
||||
.side-bar--tab:hover & {
|
||||
|
|
@ -123,9 +122,30 @@ $sidebar-width: 240px;
|
|||
}
|
||||
|
||||
.side-bar--buttons {
|
||||
padding-right: $ix-marg-d;
|
||||
margin: 0 $ix-marg-c;
|
||||
}
|
||||
|
||||
.side-bar--button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $grid--breakpoint-md) {
|
||||
.side-bar--tab {
|
||||
margin-left: $ix-marg-d;
|
||||
}
|
||||
|
||||
.side-bar--title {
|
||||
margin: 0 $ix-marg-d $ix-marg-c $ix-marg-d;
|
||||
font-size: $ix-text-base-2;
|
||||
}
|
||||
|
||||
.side-bar--buttons {
|
||||
margin: 0 $ix-marg-d;
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
&.show {
|
||||
flex: 1 0 $sidebar-width-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -76,7 +76,7 @@ export class VerifyDataStep extends PureComponent<Props> {
|
|||
|
||||
return (
|
||||
<Form onSubmit={this.handleIncrementStep}>
|
||||
<div className="onboarding-step">
|
||||
<div className="onboarding-step wizard--skippable">
|
||||
<VerifyDataSwitcher
|
||||
notify={notify}
|
||||
type={type}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
Subproject commit ec6c02a94a0d8c3e2fcd7af44e7f66f1a242000b
|
||||
Loading…
Reference in New Issue