Browse Source

balance list updated responsive

master
simongig 4 years ago
parent
commit
a2fee6d42f
2 changed files with 38 additions and 35 deletions
  1. 21
    21
      index.html
  2. 17
    14
      index_styles.css

+ 21
- 21
index.html View File

@@ -23,31 +23,31 @@
</ul>

</nav>

<div class="balance-list">
<div class="overview">
<div id="title">Balance:</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 class="balance-list-wrapper">
<div class="balance-list">
<div class="overview">
<div id="title">Balance:</div>
<div id="total-amount">500,00 Euro</div>
</div>
<div class="box">
<div class="dropdown"></div>
<div class="entry">Beschreibung</div>
<div class="amount">Betrag</div>
</div>
<div class="box">
<div class="dropdown"></div>
<div class="entry">Beschreibung</div>
<div class="amount">Betrag</div>
<div class="grid-wrapper">
<div class="box">
<div class="dropdown"></div>
<span class="entry">Beschreibung</span>
<span class="amount">100,00 Euro</span>
</div>
<div class="box">
<div class="dropdown"></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>

</body>

</html>

+ 17
- 14
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;
}

Loading…
Cancel
Save