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

42
index.html
View File

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

31
index_styles.css
View File

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