// Variables // ============================================================================ // Fonts $base-font-family: “Noto Sans”, “Lucida Sans”, “Arial”, sans-serif; $header-font-family: “Noto Serif”, “Lucida Bright”, “Times New Roman”, serif; $base-font-size: 18px; $button-font-size: 16px; $mobile-font-size: 15px; $mobile-button-font-size: 14px; $nav-font-size: 15px; $base-font-weight: 400; $mono-font-family: “Fira Mono”, monospace; // Colors $slate-gray: #454f5b; $primary-text-color: $slate-gray; $secondary-text-color: #999; $header-text-color: $slate-gray; $subheader-text-color: #9b9b9b; $selected-text-color: #000; $divider-color: d8d8d8; $base-background-color: fff; $border-color: edeced; $well-background-color: eeeeee; $search-box-background-color: f3f3f3; $nav-text-color: a3a9ad; $nav-background-hover-color: rgba($primary-brand-color, 0.1); $dark-button-color: #272e36; $highlight-color: #FFF59D; // Spacing // 1em -> 14px $base-line-height: 30px; $base-horizontal-padding: 1em; $base-vertical-padding: 0.5em; $block-spacing: 1.5rem; $item-spacing: 1rem; $inline-spacing: 0.2em; $base-border-radius: 0.2rem; // Breakpoints, if this breakpoint is changed, be sure to change those in the .js files too $desktop-screen-breakpoint: 992px; $large-screen-breakpoint: 1400px;

// Variables // ============================================================================ $small-spacing: 10px; $spacing: 12px; $med-spacing: 1.5 * $spacing; $large-spacing: 2 * $spacing; $desktop-spacing: 3.25 * $large-spacing; $site-padding: 27px; $max-content-width: 864px; $body-padding: calc((100vw - 420px - #{$max-content-width}) / 2); $body-full-view-padding: calc((100vw - #{$max-content-width}) / 2); $body-sidebar-right-padding: 50px;

$site-header-height: 80px; $mobile-site-header-height: 60px; $doc-header-height: 80px; $toggled-doc-header-height: 80px; $site-nav-collapse-duration: 0.2s; $site-nav-collapse-timing: ease-out; $site-nav-width: 30vw; $back-to-docs-width: $doc-header-height - 1px; $mobile-back-to-docs-width: $mobile-site-header-height - 1px;

$max-site-nav-width: 420px; $site-nav-shadow-inset: inset -7px 0 13px -5px rgba(0, 0, 0, 0.15); $site-nav-shadow-outset: 7px 0 13px 5px rgba(0, 0, 0, 0.15); $site-doc-header-height: $site-header-height + $doc-header-height; $mobile-site-doc-header-height: $mobile-site-header-height + $doc-header-height;

$toolbar-button-height: 50px; $toolbar-container-height: calc(#{$toolbar-button-height} * 3);

$fab-button-size: 50px; $fab-transtition-duration: 0.2s;

// z-index // ============================================================================ $site-main-z-index: 0; $desktop-navigation-z-index: 1; $doc-header-z-index: 2; $fab-z-index: 3; $fab-trigger-z-index: 3; $site-header-z-index: 10; $mobile-navigation-z-index: 11; $search-results-z-index: 12; $toolbar-z-index: 12;