fix: improve spacing of shortcodes (#583)

thegeeklab · Feb 16, 2023 · 935b200 · 935b200
1 parent 1bf4ccc
commit 935b200
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 52 deletions.
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
@@ -237,11 +237,6 @@ svg.gdoc-icon {
       font-weight: normal;
     }
 
-    > :first-child,
-    > :first-child > :first-child {
-      margin-top: 0;
-    }
-
     section {
       margin-top: $padding-32;
     }
@@ -752,6 +747,8 @@ svg.gdoc-icon {
 }
 
 .gdoc-toc {
+  margin: $padding-16 0;
+
   // Classes to hide nested levels of ToC/Menu
   &__level--1 ul ul,
   &__level--2 ul ul ul,

diff --git a/src/sass/_chroma_base.scss b/src/sass/_chroma_base.scss
@@ -10,7 +10,6 @@
 
   .highlight {
     pre.chroma {
-      margin: 0;
       width: 100%;
       overflow: auto;
       max-height: var(--code-max-height);
@@ -32,6 +31,7 @@
     pre.chroma {
       max-height: none;
       border-radius: 0;
+      margin: 0;
     }
   }
   .chroma .lntable td:first-child {

diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss
@@ -1,24 +1,6 @@
 .gdoc-markdown {
   line-height: 1.6em;
 
-  > :first-child {
-    margin-top: 0 !important;
-  }
-
-  &--nested {
-    :first-child {
-      margin-top: 0 !important;
-    }
-
-    > pre {
-      margin-top: 0 !important;
-    }
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
-
   h1,
   h2,
   h3,
@@ -127,13 +109,6 @@
 
     border-left: $border-4 solid var(--accent-color);
     border-radius: $border-radius;
-
-    :first-child {
-      margin-top: 0;
-    }
-    :last-child {
-      margin-bottom: 0;
-    }
   }
 
   table:not(.lntable):not(.highlight) {
@@ -185,10 +160,6 @@
     }
   }
 
-  pre {
-    margin: 1rem 0;
-  }
-
   code {
     padding: 0.2em 0.4em;
   }

diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
@@ -1,7 +1,6 @@
 // {{< expand "Label" "icon" >}}
 .gdoc-expand {
-  margin-top: $padding-16;
-  margin-bottom: $padding-16;
+  margin: $padding-16 0;
 
   border: $border-1 solid var(--accent-color);
   border-radius: $border-radius;
@@ -16,7 +15,7 @@
 
   &__content {
     display: none;
-    padding: $padding-16;
+    padding: 0 $padding-16;
   }
 
   &__control:checked + &__content {
@@ -30,8 +29,7 @@
 
 // {{< tabs >}}
 .gdoc-tabs {
-  margin-top: $padding-16;
-  margin-bottom: $padding-16;
+  margin: $padding-16 0;
 
   border: $border-1 solid var(--accent-color);
   border-radius: $border-radius;
@@ -52,7 +50,7 @@
     order: 999; //Move content blocks to the end
     width: 100%;
     border-top: $border-1 solid var(--accent-color-lite);
-    padding: $padding-16;
+    padding: 0 $padding-16;
     display: none;
   }
 
@@ -70,6 +68,8 @@
 
 // {{< columns >}}
 .gdoc-columns {
+  margin: $padding-16 0;
+
   &--regular > :first-child {
     flex: 1;
   }
@@ -86,7 +86,6 @@
 
   &__content {
     flex: 1 1;
-    margin: $padding-16 0;
     min-width: $body-min-width * 0.66;
     padding: 0;
   }
@@ -99,12 +98,12 @@
 // {{< button >}}
 .gdoc-button {
   $root: &;
+  margin: $padding-16 0;
 
   display: inline-block;
   background: var(--accent-color-lite);
   border: $border-1 solid var(--accent-color);
   border-radius: $border-radius;
-  margin: $padding-8 0;
   cursor: pointer;
 
   &__link {
@@ -218,15 +217,6 @@
     }
   }
 
-  &__description {
-    > :first-child {
-      margin-top: 0;
-    }
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
-
   @each $name, $color in $hint-colors {
     &__tag.#{$name} {
       border-color: scale-color($color, $lightness: 90%, $saturation: -30%);

diff --git a/src/sass/_utils.scss b/src/sass/_utils.scss
@@ -83,6 +83,11 @@
 
 .table-wrap {
   overflow: auto;
+  margin: $padding-16 0;
+
+  > table {
+    margin: 0 !important;
+  }
 }
 
 .badge-placeholder {