1 files changed, 96 insertions, 0 deletions
diff --git a/src/css/navigation-explore.css b/src/css/navigation-explore.css
new file mode 100644
index 0000000..f954c90
--- /dev/null
+++ b/src/css/navigation-explore.css
@@ -0,0 +1,96 @@
+.navigation-explore {
+  display: flex;
+  flex-direction: column;
+}
+
+.navigation-explore.is-active {
+  height: inherit;
+}
+
+.navigation-explore .current {
+  flex-shrink: 0;
+  color: #5d5d5d;
+  background-color: #fafafa;
+  box-shadow: 0 -1px 0 #e1e1e1;
+  padding: 0 0.25rem 0 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  /* font-size: 0.75rem; */
+  font-size: 0.8824em;
+  line-height: 1;
+  height: var(--toolbar-height);
+}
+
+.navigation-explore.is-active .current {
+  box-shadow: 0 1px 0 #e1e1e1;
+}
+
+.navigation-explore .current .version {
+  background-image: url(../img/chevron.svg);
+  background-repeat: no-repeat;
+  background-position: right 0.5rem top 50%;
+  background-size: auto 0.75em;
+  padding: 0 1.5rem 0 0;
+}
+
+.navigation-explore .domains {
+  flex-grow: 1;
+  box-shadow: inset 0 1px 5px #e1e1e1;
+  background-color: #f0f0f0;
+  padding: 0.5rem;
+  margin: 0;
+  overflow-y: auto;
+  max-height: 100%;
+  display: block;
+}
+
+.navigation-explore:not(.is-active) .domains {
+  display: none;
+}
+
+.navigation-explore .domain {
+  display: block;
+}
+
+.navigation-explore .domain + .domain {
+  margin-top: 0.5rem;
+}
+
+.navigation-explore .domain .title {
+  font-weight: 500;
+}
+
+.navigation-explore .versions {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0.5rem;
+}
+
+.navigation-explore .domain .version {
+  display: block;
+  font-size: 0.95em;
+}
+
+.navigation-explore .domain .version a {
+  color: #4a4a4a;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.navigation-explore .domain .version.is-current {
+  font-weight: 500;
+}
+
+.navigation-explore .domain .version.is-latest a::after {
+  content: ' (latest)';
+}
+
+.navigation-explore .domain .version a:hover {
+  text-decoration: underline;
+}
+
+.navigation-explore .domain .version + .version {
+  padding-left: 0.5em;
+}