Add vertical divider

1 files changed, 35 insertions, 7 deletions

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
index 64219e5..358efec 100644
--- a/docs/dist/spectre.css
+++ b/docs/dist/spectre.css
@@ -935,6 +935,7 @@ textarea.form-input {
 }
 .form-checkbox .form-icon,
 .form-radio .form-icon {
+  background: #fff;
   height: 1.4rem;
   left: 0;
   top: .5rem;
@@ -1717,7 +1718,6 @@ code {
   color: #bbc1cd;
 }
 .empty {
-  background: #f8f9fa;
   border-radius: .2rem;
   color: #727e96;
   padding: 4rem;
@@ -2316,7 +2316,6 @@ code {
   color: #5764c6;
 }
 .nav .nav-item.active > a {
-  color: #50596c;
   font-weight: bold;
 }
 .nav .nav-item.active > a:focus,
@@ -2664,14 +2663,13 @@ code {
     transform: translateY(0);
   }
 }
-.divider {
-  border-top: .1rem solid #f0f1f4;
+.divider,
+.divider-vert {
   display: block;
-  height: .1rem;
-  margin: 1rem 0;
   position: relative;
 }
-.divider[data-content]::before {
+.divider[data-content]::after,
+.divider-vert[data-content]::after {
   background: #fff;
   color: #e7e9ed;
   content: attr(data-content);
@@ -2682,6 +2680,36 @@ code {
   -ms-transform: translateY(-1.1rem);
   transform: translateY(-1.1rem);
 }
+.divider {
+  border-top: .1rem solid #f0f1f4;
+  height: .1rem;
+  margin: 1rem 0;
+}
+.divider-vert {
+  display: block;
+  padding: 1rem;
+}
+.divider-vert::before {
+  border-left: .1rem solid #f0f1f4;
+  bottom: 1rem;
+  content: "";
+  display: block;
+  left: 50%;
+  position: absolute;
+  top: 1rem;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+.divider-vert[data-content]::after {
+  left: 50%;
+  padding: .4rem 0;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
 .loading {
   color: transparent !important;
   min-height: 1.6rem;