Skip to content

Instantly share code, notes, and snippets.

@tofumatt
Created September 14, 2017 19:02
Show Gist options
  • Save tofumatt/6318a92580586bc0a7d8d49c58618684 to your computer and use it in GitHub Desktop.
Save tofumatt/6318a92580586bc0a7d8d49c58618684 to your computer and use it in GitHub Desktop.
Grid style diff
diff --git a/src/amo/components/Addon/styles.scss b/src/amo/components/Addon/styles.scss
index b24cc5797524..28a74efa304d 100644
--- a/src/amo/components/Addon/styles.scss
+++ b/src/amo/components/Addon/styles.scss
@@ -193,7 +193,7 @@
.Addon-details {
display: grid;
grid-auto-flow: column dense;
- grid-gap: 10px;
+ grid-gap: 0 10px;
grid-template-columns: minmax(300px, 35%) auto;
margin: 10px 0 0;
@@ -202,7 +202,7 @@
grid-row: 1 / span 5;
.Addon--has-other-addons.Addon-persona & {
- grid-row: 3;
+ grid-row: 2 / span 5;
}
}
@@ -216,7 +216,7 @@
.AddonDescription-more-addons--theme {
grid-column: 2;
- grid-row: 1 / span 2;
+ grid-row: 1 / span 1;
}
.AddonDescription-contents {
@@ -233,13 +233,18 @@
.Addon-overall-rating {
grid-column: 1 / 2;
+
+ .Addon--has-other-addons & {
+ grid-row: 1 / span 5;
+ }
}
.AddonMoreInfo {
grid-column: 1 / 2;
+ grid-row: 4 / span 1;
.Addon-persona & {
- grid-row: 2 / span 2;
+ grid-row: 6 / span 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment