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

View File

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