Fix some vertical rhythm weirdness

haleymoore · Sep 4, 2018 · 3efd7be · 3efd7be
1 parent 95f0991
commit 3efd7be
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 27 deletions.
diff --git a/build/stylesheets/main.css b/build/stylesheets/main.css
diff --git a/build/stylesheets/maps/main.css.map b/build/stylesheets/maps/main.css.map
diff --git a/src/styles/base/_forms.scss b/src/styles/base/_forms.scss
@@ -146,9 +146,7 @@ $help-text-height: $label-height;
 
 .form-group {
   position: relative;
-  margin-top: -1px;
   margin-bottom: $padding;
-  padding-bottom: 1px;
 
   &--info {
     .form-group__input {

diff --git a/src/styles/base/_global.scss b/src/styles/base/_global.scss
@@ -26,7 +26,7 @@ footer {
 
 header {
   border-bottom: $border;
-  margin-bottom: -1px;
+  margin: -1px 0;
 }
 
 a {
@@ -78,6 +78,8 @@ code {
   padding: ($quarter-padding / 2) $quarter-padding;
   border-radius: $border-radius;
   font-family: monospace;
+  font-size: 87.5%;
+  line-height: 1;
   white-space: pre;
-  vertical-align: top;
+  vertical-align: middle;
 }
diff --git a/src/styles/base/_tables.scss b/src/styles/base/_tables.scss
@@ -12,7 +12,7 @@ $condensed-table-cell-height: $padding * 2;
 
 .table {
   display: grid;
-  margin: -1px -1px $padding -1px;
+  margin: -1px 0 calc(#{$padding} - 1px) 0;
   font: $p;
   line-height: 1;
   background-color: #fff;
@@ -27,7 +27,7 @@ $condensed-table-cell-height: $padding * 2;
   }
 
   th {
-    height: calc(#{$table-cell-height} - 1px);
+    height: $table-cell-height;
     text-align: left;
     color: $black;
     background-color: $lighter-gray;
@@ -58,7 +58,7 @@ $condensed-table-cell-height: $padding * 2;
 
   &--condensed {
     th {
-      height: calc(#{$condensed-table-cell-height} - 1px);
+      height: $condensed-table-cell-height;
     }
 
     td {

diff --git a/src/styles/components/_list-group.scss b/src/styles/components/_list-group.scss
@@ -21,6 +21,7 @@ $list-group-item-badge-width: $list-group-item-height;
 .list-group__item {
   display: grid;
   grid-template-areas: "content add-on";
+  align-items: center;
 }
 
 .list-group__item-badge,
@@ -36,19 +37,20 @@ $list-group-item-badge-width: $list-group-item-height;
 // ---------------------------------- \\
 
 .list-group {
+  margin-bottom: -2px;
   border: $border;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
 }
 
 .list-group__item {
-  margin-top: -1px;
   font: $p;
-  line-height: $list-group-item-line-height;
+  // line-height: $list-group-item-line-height;
   padding: $list-group-item-padding;
   transition: all $transition-duration $smooth-ease;
 
   &:not(:first-of-type) {
+    margin-top: -1px;
     border-top: $border;
   }
 
@@ -69,6 +71,6 @@ $list-group-item-badge-width: $list-group-item-height;
 .list-group__item-icon {
   padding: $half-padding;
   font-size: 87.5%;
-  line-height: 1;
+  line-height: 1rem;
   color: $light-text-color;
 }
diff --git a/src/styles/components/_panel.scss b/src/styles/components/_panel.scss
@@ -35,6 +35,7 @@
 
 %panel {
   margin-top: -1px;
+  margin-bottom: -1px;
   font: $p;
   background-color: $near-white;
   border: $border;
@@ -49,7 +50,7 @@
 
 .panel {
   @extend %panel;
-  margin-bottom: $padding;
+  margin-bottom: calc(#{$padding} - 1px);
 }
 
 .panel__header {
@@ -62,7 +63,7 @@
 .panel__title {
   margin: 0;
   padding: 0;
-  line-height: 1;
+  line-height: 1.125;
 }
 
 .panel__body {