app.scss

@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");
@import "normalize";
@import "root";
@import "skeleton";
@import "syntax";

:root {
  --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Roboto Mono",
    "Droid Sans Mono", "Liberation Mono", Menlo, Courier, monospace;
  --error-color: #bf4a3f;
  --primary-color: #1159a6;
  --primary-color-bright: #007bff;
  --primary-color-light: #3f94bf;
  --body-color: #222;
  --body-background: #fafafa;
  --focus-outline-color: #1eaedb;
  --input-background-color: #fff;
  --input-border-color: #d1d1d1;
  --rule-border-color: #e1e1e1;
  --table-cell-border-color: #eee;
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-down[data-reach-menu-list],
.slide-down[data-reach-menu-items] {
  border-radius: 0.25rem;
  animation: slide-down 0.2s ease;
}

#nav {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 250px;
  background: $color-primary;
  transition: left 200ms ease;
  z-index: 1;
}

#content {
  margin-left: 250px;
  padding: 20px 80px 80px 80px;
  max-width: 800px;
}

@media (max-width: 800px) {
  #nav {
    padding-top: 50px;
    left: -250px;
  }

  #content {
    margin-left: 0;
    padding: 60px 20px;
  }
}

#nav hr {
  border-color: #fff;
  opacity: 0.15;
}

.NavLink {
  display: block;
  color: white;
  text-decoration: none;
  padding: 2px 20px;
  font-size: 18px;
  font-weight: 200;
}

.NavLink:hover {
  background: hsla(0, 100%, 100%, 0.15);
}

.NavLink:active {
  color: white;
  background: hsla(0, 100%, 100%, 0.1);
}

.NavTitle {
  color: white;
  text-transform: uppercase;
  text-align: center;
}

pre,
code {
  font-family: "Source Code Pro", monospace;
}

code {
  padding: 0.2rem 0.5rem;
  margin: 0;
  font-size: 90%;
  border-radius: 0.25rem;
  background: var(--input-background-color);
}

.jsx-demo {
  background: #fff;
  margin-bottom: 2.5rem;
  border: solid 1px hsla(0, 0%, 0%, 0.1);
  position: relative;
}

.jsx-demo-code {
  position: relative;
  padding: 30px 20px 20px 20px;
  font-size: 14px;
}

.jsx-demo-code:focus-within {
  outline: 1px solid $color-focus-outline;
}

.jsx-demo-code:before,
.jsx-demo-preview:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
  text-align: center;
  font-family: $ff-sans;
  font-size: 0.8em;
  text-transform: uppercase;
  opacity: 0.5;
}

.jsx-demo-code:before {
  content: "Code Example";
}

.jsx-demo-preview:before {
  content: "Preview";
}

.jsx-demo-preview {
  position: relative;
  padding: 30px 20px 20px 20px;
  border-top: solid 1px hsla(0, 0%, 0%, 0.1);
}

.jsx-demo-error {
  margin: 0;
  padding: 20px;
  background: $color-error;
  color: #fff;
}

.jsx-demo [data-reach-accordion-item] {
  > h1,
  > h2,
  > h3,
  > h4,
  > h5,
  > h6 {
    margin: 0;
    font: inherit;
  }
}

pre > code {
  margin: 0;
}

kbd {
  box-sizing: border-box;
  border-radius: 0.25rem;
  font-family: var(--font-family-mono);
  background-color: var(--input-background-color);
  padding: 0.2em 0.4em 0.125em;
  border-color: var(--input-border-color);
  border-style: solid;
  border-width: 1px 1px 2px;
  font-size: 0.825em;
  line-height: inherit;
}

h1 {
  color: $color-primary;
}

h1:not(:first-child) {
  border-bottom: solid 1px hsla(0, 0%, 0%, 0.25);
  margin-top: 10rem;
}

h2 {
  margin-top: 5rem;
}

h3 {
  margin-top: 5rem;
}

reach-menu li {
  margin: 0;
}

a {
  color: $color-primary-bright;
}

a:active {
  color: $color-primary;
}

.bold {
  font-weight: bold;
}

.red-highlight[data-reach-menu-item][data-selected] {
  background: red;
}

.kittys [data-reach-menu-item] {
  font-size: 120%;
  display: flex;
  align-items: center;
}

.kittys img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-right: 20px;
}

.kittys [data-reach-menu-item][data-selected] {
  background: #eee;
  color: inherit;
}

/* reach-menu [data-selected] { */
/*   background: red; */
/*   color: white; */
/* } */

[data-reach-dialog-content] {
  position: relative;
  padding-top: 40px;
}

[data-reach-dialog-content] > button.close-button {
  position: absolute;
  right: 10px;
  top: 0px;
  padding: 5px;
  border: none;
  font-size: 150%;
}

[data-reach-dialog-content] > button.close-button:active {
  position: absolute;
  right: 9px;
  top: 1px;
  left: auto;
}

[data-reach-dialog-content] > button.close-button:focus {
  color: $color-primary-bright;
}

button#hamburger {
  background: $color-primary;
}

#hamburger:focus {
  background: $color-primary-bright;
}

[data-reach-dialog-overlay] {
  z-index: 1;
}

[data-reach-alert-dialog-label] {
  color: $color-primary-light;
  font-size: 150%;
  text-align: center;
  margin-bottom: 10px;
}

[data-reach-slider-marker] > span {
  position: absolute;
  font-size: 12px;
}

[data-reach-slider-marker][data-orientation="horizontal"] > span {
  top: calc(100% + 5px);
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
}

[data-reach-slider-marker][data-orientation="vertical"] > span {
  left: calc(100% + 5px);
  top: 50%;
  text-align: right;
  transform: translateY(-50%);
  white-space: nowrap;
}

.alert-buttons {
  text-align: center;
  margin-top: 20px;
}

.city-search-input {
  box-sizing: border-box;
  width: 400px;
  font: inherit;
  padding: 0.25rem 0.5rem;
  border: solid 1px #bbb;
}

.shadow-popup {
  box-sizing: border-box;
  border: solid 1px #bbb;
  border-top: solid 1px #ddd;
  margin-top: -1px;
  box-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.15);
}

.pink [data-reach-combobox-input] {
  outline: none;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 1rem;
  font-size: 100%;
  border: solid 1px #ccc;
  margin: 0;
}

.pink [data-reach-combobox-popover] {
  border: 1px solid #ccc;
  border-top: 0;
  box-sizing: border-box;
  position: relative;
  top: -1px;
}

.pink[data-reach-combobox]:focus-within [data-reach-combobox-popover] {
  border: 1px solid transparent;
  border-top: 0;
}

.pink[data-reach-combobox] {
  width: 300px;
  position: relative;
  box-sizing: border-box;
  border: solid 1px transparent;
}

.pink [data-reach-combobox-button] {
  position: absolute;
  right: 0;
  font-size: 150%;
  border: none;
  background: transparent;
  padding: 0.25rem 0.75rem;
}

.pink[data-reach-combobox]:focus-within {
  border: solid 1px rgb(234, 89, 111);
  box-shadow: 0px 0px 2px rgb(234, 89, 111);
}

.pink[data-reach-combobox]:focus-within [data-reach-combobox-input] {
  border-color: transparent;
}

.pink [data-reach-combobox-option] {
  padding: 0.25rem 1rem;
}

.pink [data-reach-combobox-option]:last-child {
  margin-bottom: 0.5rem;
}

.pink hr {
  margin: 0 1rem 0.5rem 1rem;
  display: block;
  height: 1px;
  border: none;
  background: #ccc;
  box-sizing: border-box;
}

.toc {
  li:not(:last-of-type)::after {
    content: "-";
    display: inline-block;
    margin: 0 0.25em;
  }
}

.example-custom-checkbox [data-reach-custom-checkbox-container]::before,
.example-custom-checkbox [data-reach-custom-checkbox-container]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
}

.example-custom-checkbox [data-reach-custom-checkbox-container]::before {
  width: 100%;
  height: 100%;
  border: 1px solid #b8b8b8;
  border-radius: 0.2em;
  background-color: #edeced;
}

.example-custom-checkbox [data-reach-custom-checkbox-container]:focus-within {
  outline: none;
  box-shadow: none;
}

.example-custom-checkbox
  [data-reach-custom-checkbox-container]:focus-within::before {
  box-shadow: 0 0 0 2px rgba(63, 148, 191, 0.65);
}

.example-custom-checkbox
  [data-reach-custom-checkbox-container][data-state="checked"]::before,
.example-custom-checkbox
  [data-reach-custom-checkbox-container][data-state="mixed"]::before {
  border-color: #1159a6;
  background-color: #3f94bf;
}

.example-custom-checkbox.orange
  [data-reach-custom-checkbox-container]:focus-within::before {
  box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.65);
}

.example-custom-checkbox.orange
  [data-reach-custom-checkbox-container][data-state="checked"]::before,
.example-custom-checkbox.orange
  [data-reach-custom-checkbox-container][data-state="mixed"]::before {
  border-color: #a7600b;
  background-color: #ff8c00;
}

.example-custom-checkbox.banana
  [data-reach-custom-checkbox-container]:focus-within::before {
  box-shadow: 0 0 0 2px rgba(201, 171, 0, 0.65);
}

.example-custom-checkbox.banana
  [data-reach-custom-checkbox-container][data-state="checked"]::before,
.example-custom-checkbox.banana
  [data-reach-custom-checkbox-container][data-state="mixed"]::before {
  border-color: #968210;
  background-color: #c9ab00;
}

.example-custom-checkbox.apple
  [data-reach-custom-checkbox-container]:focus-within::before {
  box-shadow: 0 0 0 2px rgba(158, 13, 13, 0.65);
}

.example-custom-checkbox.apple
  [data-reach-custom-checkbox-container][data-state="checked"]::before,
.example-custom-checkbox.apple
  [data-reach-custom-checkbox-container][data-state="mixed"]::before {
  border-color: #6b1111;
  background-color: #9e0d0d;
}

.example-custom-checkbox
  [data-reach-custom-checkbox-container][data-state="checked"]::after {
  display: block;
  width: calc(45% - 2px);
  height: calc(90% - 4px);
  border: medium solid #fff;
  border-width: 0 0.125em 0.125em 0;
  transform: translateY(-65%) translateX(-50%) rotate(45deg);
}

.example-custom-checkbox
  [data-reach-custom-checkbox-container][data-state="mixed"]::after {
  display: block;
  width: calc(100% - 6px);
  border-bottom: 0.125em solid #fff;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.example-custom-checkbox
  [data-reach-custom-checkbox][data-custom-checkmarks]::after {
  display: none;
}