style fixes
This commit is contained in:
parent
b86f7f6ea0
commit
8d3d465fa0
2 changed files with 80 additions and 70 deletions
124
css/swieta.css
124
css/swieta.css
|
|
@ -143,69 +143,77 @@
|
||||||
|
|
||||||
|
|
||||||
#order-form {
|
#order-form {
|
||||||
border-radius: var(--border-radius);
|
max-width: var(--max-content-width);
|
||||||
background-color: var(--secondary-container);
|
margin: 0 auto;
|
||||||
& > p, & > h2{
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > form {
|
& > div {
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background-color: var(--secondary-container);
|
||||||
|
& > p, & > h2{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
& > form {
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
grid-template-rows: auto auto auto;
|
grid-template-rows: auto auto auto;
|
||||||
& > fieldset {
|
& > fieldset {
|
||||||
grid-column: -1 / 1;
|
grid-column: -1 / 1;
|
||||||
& > div {
|
& > div {
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr auto auto auto;
|
|
||||||
|
|
||||||
& > span > span{
|
|
||||||
color: var(--swieta-red);
|
|
||||||
}
|
|
||||||
& > input {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
text-align: center;
|
|
||||||
width: 2rem;
|
|
||||||
appearance: textfield;
|
|
||||||
-moz-appearance: textfield;
|
|
||||||
&::-webkit-inner-spin-button,
|
|
||||||
&::-webkit-outer-spin-button {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& > button {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
grid-template-columns: 1fr auto auto auto;
|
||||||
margin: 0.5rem;
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
border: none;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
align-content: center;
|
||||||
|
& > span{
|
||||||
|
color: var(--swieta-red);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > input {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
width: 2rem;
|
||||||
|
appearance: textfield;
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
&::-webkit-inner-spin-button,
|
||||||
|
&::-webkit-outer-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > button {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
margin: 0.5rem;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
border: none;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > input, & > fieldset {
|
||||||
|
background-color: var(--surface);
|
||||||
|
}
|
||||||
|
& input:focus{
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
& > * {
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: var(--small-radius);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
& > button {
|
||||||
|
grid-column: -1 / 1;
|
||||||
|
background-color: var(--swieta-red);
|
||||||
|
color: var(--surface);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
& > input, & > fieldset {
|
|
||||||
background-color: var(--surface);
|
|
||||||
}
|
|
||||||
& input:focus{
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
& > * {
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: var(--small-radius);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
& > button {
|
|
||||||
grid-column: -1 / 1;
|
|
||||||
background-color: var(--swieta-red);
|
|
||||||
color: var(--surface);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -44,18 +44,20 @@ templ Swieta(products []types.Product) {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section id="order-form">
|
<section id="order-form">
|
||||||
<h2>Złóż zamówienie</h2>
|
<div>
|
||||||
<p>Odbiór wszystkich zamówień: <b>24 grudnia</b>. Zamówienia przyjmujemy do <b>25 grudnia</b>. Potwierdzimy zamówienie telefonicznie.</p>
|
<h2>Złóż zamówienie</h2>
|
||||||
<form>
|
<p>Odbiór wszystkich zamówień: <b>24 grudnia</b>. Zamówienia przyjmujemy do <b>15 grudnia</b>. Potwierdzimy zamówienie telefonicznie.</p>
|
||||||
<fieldset>
|
<form>
|
||||||
for _, product := range products {
|
<fieldset>
|
||||||
@product_form(product)
|
for _, product := range products {
|
||||||
}
|
@product_form(product)
|
||||||
</fieldset>
|
}
|
||||||
<input type="text" placeholder="Imie i Nazwisko"/>
|
</fieldset>
|
||||||
<input type="tel" placeholder="Numer Telefonu"/>
|
<input type="text" required placeholder="Imie i Nazwisko"/>
|
||||||
<button type="submit">Wyślij zamówienie</button>
|
<input type="tel" required placeholder="Numer Telefonu"/>
|
||||||
</form>
|
<button type="submit">Wyślij zamówienie</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue