barthiv73098/Testosteroth
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

balance list updated responsive

Browse Source
This commit is contained in:
simongig 2019-11-19 12:04:44 +01:00
parent df0327404f
commit a2fee6d42f
2 changed files with 38 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -23,7 +23,7 @@
</ul>
</nav>
<div class="balance-list-wrapper">
<div class="balance-list">
<div class="overview">
<div id="title">Balance:</div>
@ -33,21 +33,21 @@
<div class="box">
<div class="dropdown"></div>
<span class="entry">Beschreibung</span>
<span class="amount">Betrag</span>
<span class="amount">100,00 Euro</span>
</div>
<div class="box">
<div class="dropdown"></div>
<div class="entry">Beschreibung</div>
<div class="amount">Betrag</div>
<div class="amount">50,00 Euro</div>
</div>
<div class="box">
<div class="dropdown"></div>
<div class="entry">Beschreibung</div>
<div class="amount">Betrag</div>
<div class="amount">2,99 Euro</div>
</div>
</div>
</div>
</div>
</body>
</html>

31
index_styles.css
View File

@ -1,6 +1,7 @@
* {
padding: 0;
margin: 0rem;
margin: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.menu_left_element {
@ -24,7 +25,6 @@
height: 100%;
text-decoration: none;
padding: 0.4rem;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 2.6rem;
text-decoration-color: black;
}
@ -53,18 +53,18 @@
.grid-wrapper {
display: grid;
padding: 0 2em 0 2em;
grid-template-columns: 1fr;
grid-template-rows: 80px 80px 80px;
grid-gap: 10px;
}
.box {
background-color: #C4C4C4;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-areas: "dropdown entry entry entry entry entry entry entry entry entry amount amount";
font-size: 2em;
grid-template-columns: 20px 50% auto;
grid-gap: 5px;
font-size: 1.4em;
border-radius: 10px;
}
@ -73,21 +73,24 @@
vertical-align: center;
align-items: center;
padding: 5px;
grid-area: entry;
}
.amount {
display: flex;
vertical-align: center;
justify-content: flex-end;
align-items: center;
padding: 10px;
text-align: right;
grid-area: amount;
}
.balance-list-wrapper {
display: flex;
justify-content: center;
}
.balance-list {
display: grid;
grid-template-areas: ;
width: 700px;
margin: 20px;
}
.overview {
@ -105,9 +108,9 @@
}
.dropdown {
grid-area: dropdown;
background-image: url("./components/icons/caret-down-solid.svg");
background-repeat: no-repeat;
background-position: center;
fill: #F3f3F3
background-size: 15px;
background-position: right;
color: #f3f3f3;
}