mirror of
https://github.com/cloudmaker97/DurstRechner.git
synced 2025-12-06 07:58:39 +00:00
Nested CSS und kleinere Design-Anpassungen
This commit is contained in:
parent
62f7ae843d
commit
495494f613
2 changed files with 182 additions and 118 deletions
22
index.html
22
index.html
|
|
@ -24,6 +24,7 @@
|
||||||
<span class="amount">1</span>
|
<span class="amount">1</span>
|
||||||
<span class="value">5,50</span>
|
<span class="value">5,50</span>
|
||||||
<span class="name">Longdrink</span>
|
<span class="name">Longdrink</span>
|
||||||
|
<button class="remove">X</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="calculator-summary">
|
<div class="calculator-summary">
|
||||||
|
|
@ -41,8 +42,25 @@
|
||||||
<button class="product">
|
<button class="product">
|
||||||
<img src="https://placehold.co/150x150" alt="Produkt 1" height="150" width="150">
|
<img src="https://placehold.co/150x150" alt="Produkt 1" height="150" width="150">
|
||||||
<span class="product-meta">
|
<span class="product-meta">
|
||||||
<span class="name">Produkt 1</span>
|
<span class="name">Longdrink with venice Ice and ctara asf as</span>
|
||||||
<span class="value">5,50</span>
|
</span>
|
||||||
|
</button>
|
||||||
|
<button class="product">
|
||||||
|
<img src="https://placehold.co/150x150" alt="Produkt 1" height="150" width="150">
|
||||||
|
<span class="product-meta">
|
||||||
|
<span class="name">Wasser mit fadem Beigeschmack</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button class="product">
|
||||||
|
<img src="https://placehold.co/150x150" alt="Produkt 1" height="150" width="150">
|
||||||
|
<span class="product-meta">
|
||||||
|
<span class="name">Longdrink with venice Ice and ctara asf as</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button class="product">
|
||||||
|
<img src="https://placehold.co/150x150" alt="Produkt 1" height="150" width="150">
|
||||||
|
<span class="product-meta">
|
||||||
|
<span class="name">Longdrink with venice Ice and ctara asf as</span>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
198
stylesheet.css
198
stylesheet.css
|
|
@ -8,11 +8,18 @@
|
||||||
--box-padding: 1em;
|
--box-padding: 1em;
|
||||||
--currency-symbol: " €";
|
--currency-symbol: " €";
|
||||||
--amount-times-symbol: "x ";
|
--amount-times-symbol: "x ";
|
||||||
--product-meta-separator: " — ";
|
--product-button-background-color: #f0f0f0;
|
||||||
|
--product-button-hover-background-color: #e0e0e0;
|
||||||
|
--product-button-color: #000;
|
||||||
|
--product-button-border-color: #000;
|
||||||
|
--product-button-border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -20,143 +27,182 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: var(--header-background-color);
|
background-color: var(--header-background-color);
|
||||||
color: var(--header-text-color);
|
color: var(--header-text-color);
|
||||||
padding: .5em;
|
padding: .5em;
|
||||||
}
|
|
||||||
header h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
transform: translateY(-.1em);
|
transform: translateY(-.1em);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
|
||||||
header button {
|
> span.emoji {
|
||||||
|
padding-right: .4em;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "🍺";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
background-color: var(--header-button-background-color);
|
background-color: var(--header-button-background-color);
|
||||||
color: var(--header-button-color);
|
color: var(--header-button-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
header h1 > span.emoji {
|
|
||||||
padding-right: .4em;
|
|
||||||
}
|
|
||||||
header h1 > span.emoji:before {
|
|
||||||
content: "🍺";
|
|
||||||
}
|
|
||||||
.slot {
|
.slot {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside.calculator {
|
aside.calculator {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
background-color: var(--aside-background-color);
|
background-color: var(--aside-background-color);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
min-width: 300px;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
||||||
}
|
|
||||||
aside.calculator .line-items {
|
> div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: var(--box-padding);
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-items {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
gap: .3em;
|
||||||
aside.calculator .line-summary {
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
font-size: 1.3em;
|
||||||
|
|
||||||
|
.value {
|
||||||
|
margin-right: .2em;
|
||||||
|
&::after {
|
||||||
|
content: var(--currency-symbol);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount {
|
||||||
|
margin-right: .4em;
|
||||||
|
&::after {
|
||||||
|
content: var(--amount-times-symbol);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .remove {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: .8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-summary {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
aside.calculator .calculator-action {
|
|
||||||
|
.calculator-summary {
|
||||||
|
> .value {
|
||||||
|
display: flex;
|
||||||
|
font-size: 1.8em;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: .2em;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: var(--currency-symbol);
|
||||||
|
padding-left: .2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.calculator-action {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
|
||||||
aside.calculator .calculator-action button {
|
button {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
padding: .5em;
|
padding: .5em;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
aside.calculator > div,
|
}
|
||||||
main.controls > div {
|
|
||||||
padding: var(--box-padding);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
aside.calculator > div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
aside.calculator .line-items {
|
|
||||||
gap: .3em;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
aside.calculator .line-items .item {
|
|
||||||
font-size: 1.3em;
|
|
||||||
}
|
|
||||||
aside.calculator .line-items .item > .value::after {
|
|
||||||
content: var(--currency-symbol);
|
|
||||||
}
|
|
||||||
aside.calculator .line-items .item > .amount::after {
|
|
||||||
content: var(--amount-times-symbol);
|
|
||||||
}
|
|
||||||
aside.calculator .calculator-summary > .value {
|
|
||||||
display: flex;
|
|
||||||
font-size: 1.8em;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: .2em;
|
|
||||||
}
|
|
||||||
aside.calculator .calculator-summary > .value::after {
|
|
||||||
content: var(--currency-symbol);
|
|
||||||
padding-left: .2em;
|
|
||||||
}
|
|
||||||
main.controls {
|
main.controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 4 0 0;
|
flex: 4 0 0;
|
||||||
}
|
|
||||||
main.controls > div {
|
> div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: .5em;
|
gap: .5em;
|
||||||
}
|
padding: var(--box-padding);
|
||||||
main.controls > div > .tab {
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
> .tab {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
|
||||||
main.controls > div > .tab.active {
|
&.active {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
main.controls > div > .tab.tab-controls .product-grid {
|
|
||||||
|
&.tab-controls {
|
||||||
|
.product-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
/* 3 per row*/
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
gap: .5em;
|
gap: .5em;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: var(--box-padding);
|
padding: var(--box-padding);
|
||||||
}
|
|
||||||
main.controls > div > .tab.tab-controls .product-grid .product {
|
button.product {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
border: 1px solid black;
|
border: 1px solid var(--product-button-border-color);
|
||||||
border-radius: 5px;
|
border-radius: var(--product-button-border-radius);
|
||||||
}
|
background-color: var(--product-button-background-color);
|
||||||
main.controls > div > .tab.tab-controls .product-grid .product > .product-meta {
|
color: var(--product-button-color);
|
||||||
|
&:hover, &:focus-visible {
|
||||||
|
background-color: var(--product-button-hover-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .product-meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: .5em;
|
margin-top: .5em;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
main.controls > div > .tab.tab-controls .product-grid .product .product-meta > *:not(:last-child)::after {
|
}
|
||||||
content: var(--product-meta-separator);
|
}
|
||||||
padding-right: .5em;
|
}
|
||||||
}
|
}
|
||||||
main.controls > div > .tab.tab-controls .product-grid .product .product-meta > .value::after {
|
|
||||||
content: var(--currency-symbol);
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue