Fix scroll on tab change

parent e05715f0
Pipeline #1438 passed with stage
in 36 seconds
......@@ -78,7 +78,7 @@ nav > :nth-child(1) > img {
margin-left: 7vw;
}
#inputs > *:not(:nth-child(1)) {
#inputs > * {
padding-left: 10%;
padding-right: 10%;
}
......@@ -198,16 +198,14 @@ div[id^="step"]:target {
display: block;
}
#inputs > div:first-child {
div.randomize-button-container {
display: flex;
align-items: center;
justify-content: center;
height: 7vw;
border-bottom: 1px solid #dde5f1;
}
#inputs > div:first-child > button.randomize {
width: 60%;
width: 125%;
margin-left: -12.5%;
}
div.navButtons {
......@@ -234,7 +232,7 @@ body {
padding-bottom: 20px;
}
#inputs > div:nth-child(1) {
.randomize-button-container {
display: none !important;
}
......@@ -259,7 +257,7 @@ body {
display: none;
}
div#step3 > div {
div#step3 > .fontpicker {
max-height: 150px;
overflow-x: auto;
}
......@@ -345,12 +343,12 @@ div#step4 > div:nth-of-type(1) {
background-size: 400%;
}
div#step3 > div:nth-of-type(1) > input[type="radio"],
div#step3 input[type="radio"],
div#step4 input[type="radio"] {
display: none;
}
div#step3 > div:nth-of-type(1) > input[type="radio"] + label {
div#step3 input[type="radio"] + label {
display: block;
width: 100%;
font-size: 2.4em;
......@@ -358,7 +356,7 @@ div#step3 > div:nth-of-type(1) > input[type="radio"] + label {
padding-right: 20px;
}
div#step3 > div:nth-of-type(1) > input[type="radio"]:checked + label {
div#step3 input[type="radio"]:checked + label {
color: white;
background-color: #497ed5;
}
......
......@@ -25,10 +25,10 @@
<a class="fa fa-cogs" href="#step5"></a>
</nav>
<form id="inputs" action="./generate.png" target="_blank">
<div>
<a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
</div>
<div id="step1">
<div class="randomize-button-container">
<a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
</div>
<h2 class="title-small">Choisissez 2 couleurs</h2>
<h2 class="title-big">Choisissez la couleur de fond</h2>
<div class="colorpicker">
......@@ -101,6 +101,9 @@
</div>
</div>
<div id="step2">
<div class="randomize-button-container">
<a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
</div>
<h2>Remplissez le texte à trou</h2>
<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" name="text" maxlength="90"></textarea>
<div class="navButtons">
......@@ -109,8 +112,11 @@
</div>
</div>
<div id="step3">
<div class="randomize-button-container">
<a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
</div>
<h2>Choisissez votre police</h2>
<div>
<div class="fontpicker">
<input type="radio" id="radio-font-1" name="font" value="bilbo-inc" /><label for="radio-font-1" style="font-family: bilbo-inc">Bilbo inc</label>
<input type="radio" id="radio-font-2" name="font" value="bluu-next" checked/><label for="radio-font-2" style="font-family: bluu-next">Bluu Next</label>
<input type="radio" id="radio-font-3" name="font" value="boeticher" /><label for="radio-font-3" style="font-family: boeticher">Boeticher</label>
......@@ -129,6 +135,9 @@
</div>
</div>
<div id="step4">
<div class="randomize-button-container">
<a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
</div>
<h2>Choisissez votre icône</h2>
<div class="iconpicker">
<input type="radio" id="radio-icon-1" name="icon" value="1" checked/>
......@@ -210,6 +219,9 @@
</div>
</div>
<div id="step5">
<div class="randomize-button-container">
<a class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></a>
</div>
<h2>Signez votre création ! (optionnel)</h2>
<input type="text" id="signature" name="signature" />
<div class="navButtons">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment