mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-02 17:38:31 +02:00
306 lines
8.6 KiB
SCSS
306 lines
8.6 KiB
SCSS
@use '../helpers/functions' as *;
|
|
|
|
.docs-menu {
|
|
background-color: $neutral-20;
|
|
border-top: 1px solid $neutral-30;
|
|
margin: 0 -16px;
|
|
|
|
&__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: rem(15) rem(20);
|
|
cursor: pointer;
|
|
|
|
&.active {
|
|
.docs-menu__button svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: rem(18);
|
|
line-height: rem(27);
|
|
font-weight: 400;
|
|
color: $neutral-90;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
display: none;
|
|
padding: $spacer * 1.5 $spacer * 2 rem(12);
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
position: relative;
|
|
margin-top: $spacer;
|
|
margin-bottom: $spacer * 2;
|
|
|
|
svg {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: $spacer;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
button {
|
|
padding-left: $spacer * 2.8;
|
|
color: $neutral-70;
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-top: 1px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: $spacer;
|
|
transform: translateY(-50%);
|
|
background: url('/icons/outline/search-white.svg') no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__button {
|
|
padding: 0;
|
|
outline: none;
|
|
border: none;
|
|
background-color: transparent;
|
|
width: rem(24);
|
|
height: rem(24);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__links {
|
|
|
|
&-title {
|
|
color: $neutral-98;
|
|
font-weight: bold;
|
|
font-size: rem(18);
|
|
line-height: rem(27);
|
|
margin: 0 0 $spacer;
|
|
padding-top: $spacer * 0.5;
|
|
}
|
|
|
|
&-group {
|
|
padding-bottom: rem(4);
|
|
|
|
&-heading {
|
|
display: block;
|
|
position: relative;
|
|
margin-bottom: $spacer * 0.5;
|
|
// hide native details marker
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: $neutral-70;
|
|
}
|
|
}
|
|
|
|
summary:after {
|
|
content: '';
|
|
display: block;
|
|
width: rem(10);
|
|
height: rem(10);
|
|
position: absolute;
|
|
top: rem(7);
|
|
right: rem(4);
|
|
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.16667 0.916341C3.10476 0.869913 3.03115 0.841641 2.95409 0.834692C2.87702 0.827742 2.79954 0.842391 2.73033 0.876997C2.66112 0.911602 2.60291 0.964797 2.56223 1.03062C2.52155 1.09644 2.5 1.17229 2.5 1.24967V8.74968C2.5 8.82706 2.52155 8.90291 2.56223 8.96873C2.60291 9.03455 2.66112 9.08775 2.73033 9.12235C2.79954 9.15696 2.87702 9.17161 2.95409 9.16466C3.03115 9.15771 3.10476 9.12944 3.16667 9.08301L8.16667 5.33301C8.21842 5.2942 8.26042 5.24387 8.28934 5.18601C8.31827 5.12816 8.33333 5.06436 8.33333 4.99967C8.33333 4.93499 8.31827 4.87119 8.28934 4.81334C8.26042 4.75548 8.21842 4.70515 8.16667 4.66634L3.16667 0.916341Z' fill='%238F98B3'/%3E%3C/svg%3E%0A");
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
&.active {
|
|
.docs-menu__links-group-heading > a {
|
|
padding: rem(4) 0 rem(4) $spacer;
|
|
border-left: rem(1) solid $primary-50;
|
|
font-weight: 600;
|
|
background-color: $neutral-30;
|
|
color: $neutral-90;
|
|
}
|
|
|
|
summary:after {
|
|
top: rem(11);
|
|
}
|
|
}
|
|
|
|
&[open=''] {
|
|
summary:after {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.66732 8.16667C4.70781 8.21588 4.75871 8.25552 4.81634 8.28273C4.87397 8.30995 4.93692 8.32406 5.00065 8.32406C5.06439 8.32406 5.12733 8.30995 5.18496 8.28273C5.2426 8.25552 5.29349 8.21588 5.33398 8.16667L9.08399 3.16667C9.13041 3.10476 9.15869 3.03115 9.16564 2.95409C9.17258 2.87702 9.15794 2.79954 9.12333 2.73033C9.08872 2.66112 9.03553 2.60291 8.96971 2.56223C8.90388 2.52155 8.82803 2.5 8.75065 2.5H1.25065C1.17327 2.5 1.09742 2.52155 1.0316 2.56223C0.965773 2.60291 0.912579 2.66112 0.877973 2.73033C0.843368 2.79954 0.828719 2.87702 0.835668 2.95409C0.842617 3.03115 0.87089 3.10476 0.917318 3.16667L4.66732 8.16667Z' fill='%238F98B3'/%3E%3C/svg%3E%0A");
|
|
}
|
|
}
|
|
}
|
|
|
|
&-submenu {
|
|
margin-bottom: 0;
|
|
padding-left: $spacer;
|
|
|
|
&-item {
|
|
margin-bottom: $spacer * 0.5;
|
|
list-style: none;
|
|
|
|
a {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: $neutral-70;
|
|
font-size: rem(14);
|
|
line-height: rem(21);
|
|
}
|
|
|
|
&.active {
|
|
a {
|
|
color: $primary-50;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(xl) {
|
|
background-color: $neutral-10;
|
|
border-top: none;
|
|
margin: 0;
|
|
|
|
&__header {
|
|
display: none;
|
|
}
|
|
|
|
&__content {
|
|
display: block;
|
|
padding: 0;
|
|
}
|
|
|
|
&__input {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&__links {
|
|
margin-top: $spacer * 1.5;
|
|
}
|
|
|
|
&__links-group {
|
|
&.active {
|
|
.docs-menu__links-group-heading > a {
|
|
background-color: $neutral-20;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-theme='light'] & {
|
|
border-color: $neutral-100;
|
|
background-color: $neutral-94;
|
|
|
|
&__button svg path {
|
|
stroke: $neutral-30;
|
|
}
|
|
|
|
&__header {
|
|
h2 {
|
|
color: $neutral-30;
|
|
}
|
|
|
|
&__content svg {
|
|
fill: $neutral-30;
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
button {
|
|
color: $neutral-50;
|
|
|
|
&:after {
|
|
mask: url('/icons/outline/search-white.svg') no-repeat;
|
|
-webkit-mask: url('/icons/outline/search-white.svg') no-repeat;
|
|
background: $neutral-30;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__links {
|
|
&-title {
|
|
color: $neutral-30;
|
|
}
|
|
|
|
&-group {
|
|
&-heading {
|
|
a {
|
|
color: $neutral-30;
|
|
|
|
&:hover {
|
|
color: $primary-50;
|
|
}
|
|
}
|
|
}
|
|
|
|
summary:after {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.16667 0.916341C3.10476 0.869913 3.03115 0.841641 2.95409 0.834692C2.87702 0.827742 2.79954 0.842391 2.73033 0.876997C2.66112 0.911602 2.60291 0.964797 2.56223 1.03062C2.52155 1.09644 2.5 1.17229 2.5 1.24967V8.74968C2.5 8.82706 2.52155 8.90291 2.56223 8.96873C2.60291 9.03455 2.66112 9.08775 2.73033 9.12235C2.79954 9.15696 2.87702 9.17161 2.95409 9.16466C3.03115 9.15771 3.10476 9.12944 3.16667 9.08301L8.16667 5.33301C8.21842 5.2942 8.26042 5.24387 8.28934 5.18601C8.31827 5.12816 8.33333 5.06436 8.33333 4.99967C8.33333 4.93499 8.31827 4.87119 8.28934 4.81334C8.26042 4.75548 8.21842 4.70515 8.16667 4.66634L3.16667 0.916341Z' fill='%2328324d'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
&.active {
|
|
.docs-menu__links-group-heading > a {
|
|
color: $primary-50;
|
|
background: $neutral-90;
|
|
}
|
|
}
|
|
|
|
&[open=''] {
|
|
summary:after {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.66732 8.16667C4.70781 8.21588 4.75871 8.25552 4.81634 8.28273C4.87397 8.30995 4.93692 8.32406 5.00065 8.32406C5.06439 8.32406 5.12733 8.30995 5.18496 8.28273C5.2426 8.25552 5.29349 8.21588 5.33398 8.16667L9.08399 3.16667C9.13041 3.10476 9.15869 3.03115 9.16564 2.95409C9.17258 2.87702 9.15794 2.79954 9.12333 2.73033C9.08872 2.66112 9.03553 2.60291 8.96971 2.56223C8.90388 2.52155 8.82803 2.5 8.75065 2.5H1.25065C1.17327 2.5 1.09742 2.52155 1.0316 2.56223C0.965773 2.60291 0.912579 2.66112 0.877973 2.73033C0.843368 2.79954 0.828719 2.87702 0.835668 2.95409C0.842617 3.03115 0.87089 3.10476 0.917318 3.16667L4.66732 8.16667Z' fill='%2328324d'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
svg path {
|
|
fill: $neutral-30;
|
|
}
|
|
}
|
|
|
|
&-submenu {
|
|
&-item {
|
|
a {
|
|
color: $neutral-30;
|
|
|
|
&:hover {
|
|
color: $primary-50;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
a {
|
|
color: $primary-50;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(xl) {
|
|
background-color: $neutral-98;
|
|
|
|
&__links-group {
|
|
&.active {
|
|
.docs-menu__links-group-heading > a {
|
|
background-color: $neutral-94;
|
|
color: $neutral-30;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|