// Button Group // ———— .toolbar-container {
position: fixed; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid $divider-color; border-radius: $base-border-radius; overflow: hidden; z-index: $toolbar-z-index; flex-shrink: 0; right: $large-spacing; top: calc(#{$site-doc-header-height} + (2 * #{$block-spacing})); transition: top 0.3s; .toolbar-button { cursor: pointer; background: transparent; // Fixed width here to allow popper to position properly in safari width: $toolbar-button-height; height: $toolbar-button-height; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid $divider-color; &:last-child { border-bottom: none; } .btn-icon { height: 1.2rem; width: 1.2rem; pointer-events: none; user-select: none; display: block; } .mobile-btn-icon { display: none; } &:not(:hover) { .btn-icon.hover { display: none; } } .tooltip { position: fixed; right: $toolbar-button-height + 40px; font-size: 12px; color: $well-background-color; background-color: $slate-gray; border-radius: $base-border-radius; padding: 2px 8px; display: none; } &:hover { background: $well-background-color; .btn-icon.hover { display: block; } .btn-icon:not(.hover) { display: none; } .tooltip { display: block; } } &:active { background: $divider-color; } // Needed to prevent doule tap bug for ios devices @media (hover: none) { &:hover { background: transparent; .btn-icon.hover { display: none; } .btn-icon:not(.hover) { display: block; } } } // specifically for menu button #menu-toggle:checked ~ .btn-icon.hover { display: block; } #menu-toggle:checked ~ .btn-icon:not(.hover) { display: none; } } // For mobile menu @include mobile-screen { right: 0; top: 0; border-radius: 0; border: none; .toolbar-button { border: none; background: $primary-brand-color; width: $mobile-site-header-height; height: $mobile-site-header-height; &:not(#menu-toggle-btn) { display: none; } &:hover { background: $primary-brand-color; .tooltip { // absolutely dont display tooltip in mobile display: none; } } .mobile-btn-icon { display: block; user-select: none; &.close { display: none; } } #menu-toggle:checked { & ~ .mobile-btn-icon.close { display: block; } & ~ .mobile-btn-icon:not(.close) { display: none; } } // Always disable btn-icon in mobile view .btn-icon { display: none !important; } } }
}
@include mobile-screen {
body.menu-toggled #menu-toggle-btn { background: $header-text-color; }
}
// Floating action button // ———————- $max-child-actions: 4; $transition-duration: 0.4s;
.fab {
position: fixed; bottom: $med-spacing; right: $med-spacing; text-align: center; z-index: $fab-z-index; font-family: Arial, Helvetica, sans-serif; @include desktop-screen { display: none; } .back-to-top, .trigger, .action { @include flex-center(); user-select: none; border-radius: 50%; height: $fab-button-size; width: $fab-button-size; box-shadow: 4px 4px 4px 2px rgba(0, 0, 0, 0.05); cursor: pointer; &:active { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.25); } } .trigger { position: relative; background: $primary-brand-color; z-index: $fab-trigger-z-index; img.close { display: none; } } .back-to-top { position: absolute; z-index: $fab-trigger-z-index; background: $dark-button-color; bottom: $fab-button-size + $med-spacing; visibility: visible; opacity: 1; transition: opacity $fab-transtition-duration ease-in; &.hidden { visibility: hidden; opacity: 0; } } .overlay { position: fixed; background: black; opacity: 0; top: 0; left: 0; height: 0; width: 0; } .action { position: absolute; top: 0; margin: 0; opacity: 0; background: $divider-color; height: $fab-button-size; width: $fab-button-size; transition: transform $fab-transtition-duration ease, opacity $fab-transtition-duration/3 ease-out; img { width: 20px; height: 20px; } } .actions { transition: opacity $fab-transtition-duration ease; } &.open { .actions { $action-space: $fab-button-size + $med-spacing; opacity: 1; @for $i from 1 through $max-child-actions { $distance: $action-space * $i; .action:nth-child(#{$i}) { transform: translateY(-$distance); transition: transform $fab-transtition-duration ease, opacity $fab-transtition-duration ease-in $fab-transtition-duration/3; opacity: 1; } } } .overlay { opacity: 0.8; height: 100vh; width: 100vw; } .back-to-top { display: none; } .trigger { img.close { display: flex; } img { display: none; } } .tooltip { opacity: 1; transform: translateY(-50%) scale(1); right: $fab-button-size + $spacing; transition-delay: $fab-transtition-duration/2; } } .tooltip { position: absolute; top: 50%; right: 0; padding: 4px 8px; font-size: 11px; color: $divider-color; background-color: rgba(39, 46, 54, 0.8); transform: translateY(-50%) scale(0); transform-origin: right center 0; text-align: right; transition: all $transition-duration ease; opacity: 0; white-space: nowrap; width: auto; border-radius: $base-border-radius; font-family: $base-font-family; border: 1px solid $divider-color; }
}
// Hide on first page // —————– @include desktop-screen {
.index .toolbar-container { display: none; }
}
@include mobile-screen {
.index .fab { display: none; }
}
// Banner // ———— $banner-bg: #15499b; banner {
background: $banner-bg; box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.12); font-size: 14px; line-height: normal; width: 330px; max-width: 80vw; padding: $spacing $med-spacing; color: #f0f4f6; display: none; -webkit-font-smoothing: antialiased; border-radius: $base-border-radius; align-items: center; #close-banner { margin-left: 15px; cursor: pointer; height: 100%; img { width: 24px; height: 24px; max-width: 24px; } } .popper__arrow { width: 0; height: 0; border-style: solid; position: absolute; margin: 5px; } &[x-placement^="bottom"] { margin-top: 5px; .popper__arrow { border-width: 0 5px 5px 5px; border-color: transparent transparent $banner-bg transparent; top: -4px; margin-top: 0; margin-bottom: 0; } } &[x-placement^="top"] { margin-bottom: 5px; .popper__arrow { border-width: 5px 5px 0 5px; border-color: $banner-bg transparent transparent transparent; bottom: -4px; margin-top: 0; margin-bottom: 0; } }
}