moanos/RattenheimRechner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: styling cage selector
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Details

Browse Source
This commit is contained in:
moanos [he/him] 2024-07-19 23:44:33 +02:00
parent 583b0fb49f
commit 3b4cbd8ae1
2 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/assets/css/style.css
View File

@ -118,16 +118,22 @@ label {
.cage-selector{ .cage-selector{
gap: 15px; gap: 15px;
display: flex;
flex-wrap: wrap;
} }
.card { .card {
text-align: center; text-align: center;
color: var(--text-two); color: var(--text-two);
flex: 1 25%;
} }
.card-photo { .card-photo {
height: 200px; height: 200px;
width: 200px; min-width: 200px;
background-color: #ffffff; background-color: var(--background-one);
box-shadow: 0 0 25px rgba(17, 1, 68, 0.08); box-shadow: 0 0 25px rgba(17, 1, 68, 0.08);
border-radius: 8px; border-radius: 8px;
position: relative; position: relative;
@ -175,6 +181,9 @@ input[type="checkbox"]:checked:after {
.form-measurements { .form-measurements {
max-height: 90%; max-height: 90%;
} }
.form-measurements input {
width: 70%;
}
input.measurement { input.measurement {
margin-top: 5%; margin-top: 5%;
} }

22
src/index.html
View File

@ -48,17 +48,21 @@
<div class="card-photo"> <div class="card-photo">
<input type="checkbox" id="tiaki"/> <input type="checkbox" id="tiaki"/>
<form class="form-measurements"> <form class="form-measurements">
<input class="measurement" type="number" id="width"> <div class="input-measurement">
<label for="width">Breite</label> <label for="width">Breite</label>
<input class="measurement" type="number" id="width">
<input class="measurement" type="number" id="depth"> </div>
<label for="depth">Tiefe</label> <div class="input-measurement">
<label for="depth">Tiefe</label>
<input class="measurement" type="number" id="height"> <input class="measurement" type="number" id="depth">
<label for="height">Höhe</label> </div>
<div class="input-measurement">
<label for="height">Höhe</label>
<input class="measurement" type="number" id="height">
</div>
</form> </form>
</div> </div>
<label>Anderer Käfig</label> <label>Käfigmaße</label>
</div> </div>
</div> </div>