rename grid areas

This commit is contained in:
Adrian Thompson
2020-09-10 15:10:53 +02:00
parent 036958b279
commit 1327650492
2 changed files with 14 additions and 14 deletions

View File

@@ -144,7 +144,7 @@ input[type="text"] {
margin-top: 1rem; margin-top: 1rem;
display: grid; display: grid;
grid: 1fr / .5fr 2fr .5fr .5fr; grid: 1fr / .5fr 2fr .5fr .5fr;
grid-template-areas: "picture details button1 button2"; grid-template-areas: "picture details button-left button-right";
justify-items: center; justify-items: center;
align-items: center; align-items: center;
grid-gap: 1em; grid-gap: 1em;
@@ -156,11 +156,11 @@ input[type="text"] {
grid: 1fr .5fr / .5fr 1fr; grid: 1fr .5fr / .5fr 1fr;
grid-template-areas: "picture details" grid-template-areas: "picture details"
"button1 button2"; "button-left button-right";
grid-gap: .5em; grid-gap: .5em;
.vin-button{ .vin-button{
grid-area: button2; grid-area: button-right;
padding: .5em; padding: .5em;
font-size: 1em; font-size: 1em;
line-height: 1em; line-height: 1em;
@@ -168,7 +168,7 @@ input[type="text"] {
} }
.wine-link{ .wine-link{
grid-area: button1; grid-area: button-left;
} }
h2{ h2{
@@ -207,7 +207,7 @@ input[type="text"] {
} }
} }
.wine-link { .wine-link {
grid-area: button1; grid-area: button-left;
color: #333333; color: #333333;
font-family: Arial; font-family: Arial;
text-decoration: none; text-decoration: none;
@@ -218,7 +218,7 @@ input[type="text"] {
} }
.vin-button{ .vin-button{
grid-area: button2; grid-area: button-right;
} }
@include tablet{ @include tablet{

View File

@@ -76,10 +76,10 @@ export default {
display: grid; display: grid;
grid: auto-flow min-content / 2fr 1fr; grid: auto-flow min-content / 2fr 1fr;
grid-template-areas: "top top" grid-template-areas: "top top"
"middle-left middle-right1" "middle-left middle-right-top"
"middle-left middle-right2" "middle-left middle-right-bot"
"bottom1 bottom1" "bottom-top bottom-top"
"bottom2 bottom2"; "bottom-bot bottom-bot";
grid-gap: 1em; grid-gap: 1em;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
@@ -97,13 +97,13 @@ export default {
} }
.requested-amount{ .requested-amount{
grid-area: middle-right1; grid-area: middle-right-top;
width: 90%; width: 90%;
word-break: keep-all; word-break: keep-all;
} }
.wine-link{ .wine-link{
grid-area: middle-right2; grid-area: middle-right-bot;
color: #333333; color: #333333;
font-family: Arial; font-family: Arial;
text-decoration: none; text-decoration: none;
@@ -113,11 +113,11 @@ export default {
} }
.vin-button{ .vin-button{
grid-area: bottom1; grid-area: bottom-top;
margin-bottom: 1em; margin-bottom: 1em;
&.danger{ &.danger{
grid-area: bottom2; grid-area: bottom-bot;
background-color: $light-red; background-color: $light-red;
color: $red; color: $red;
} }