rename grid areas
This commit is contained in:
@@ -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{
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user