mirror of
https://github.com/qdrant/landing_page.git
synced 2026-09-29 07:58:31 +02:00
Anush
a9a2cad4d1
* docs: C# client usage guides * docs: use named args * Add files via upload * docs: simplify explore.md list expressions * docs: missed named args * docs: csharp.svg
123 lines
3.0 KiB
SCSS
123 lines
3.0 KiB
SCSS
$tabs-bg-color: var(--neutral-n-100);
|
|
$tabs-bg-color-active: var(--neutral-n-50);
|
|
$tabs-bg-color-hover: var(--neutral-n-200);
|
|
$tabs-font-color: var(--neutral-n-500);
|
|
$tabs-font-color-active: var(--neutral-n-700);
|
|
$tabs-font-color-hover: var(--neutral-n-600);
|
|
|
|
.lang-tabs {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
background: $tabs-bg-color;
|
|
border-top: 1px solid $tabs-bg-color;
|
|
border-left: 1px solid $tabs-bg-color;
|
|
border-right: 1px solid $tabs-bg-color;
|
|
|
|
&__button {
|
|
display: flex;
|
|
padding: 10px 20px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: $tabs-font-color;
|
|
position: relative;
|
|
text-indent: -9999px;
|
|
flex-wrap: wrap;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
text-indent: unset;
|
|
}
|
|
|
|
&:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: $tabs-font-color;
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
-webkit-mask-image: url("/css/assets/lang-switcher/http.svg");
|
|
mask-image: url("/css/assets/lang-switcher/http.svg");
|
|
}
|
|
|
|
&_python {
|
|
&:before {
|
|
-webkit-mask-image: url("/css/assets/lang-switcher/python.svg");
|
|
mask-image: url("/css/assets/lang-switcher/python.svg");
|
|
}
|
|
}
|
|
&_typescript {
|
|
&:before {
|
|
-webkit-mask-image: url("/css/assets/lang-switcher/typescript.svg");
|
|
mask-image: url("/css/assets/lang-switcher/typescript.svg");
|
|
}
|
|
}
|
|
&_rust {
|
|
&:before {
|
|
-webkit-mask-image: url("/css/assets/lang-switcher/rust.svg");
|
|
mask-image: url("/css/assets/lang-switcher/rust.svg");
|
|
}
|
|
}
|
|
&_java {
|
|
&:before {
|
|
-webkit-mask-image: url("/css/assets/lang-switcher/java.svg");
|
|
mask-image: url("/css/assets/lang-switcher/java.svg");
|
|
}
|
|
}
|
|
&_csharp {
|
|
&:before {
|
|
-webkit-mask-image: url("/css/assets/lang-switcher/csharp.svg");
|
|
mask-image: url("/css/assets/lang-switcher/csharp.svg");
|
|
}
|
|
}
|
|
|
|
&:not(.active):hover {
|
|
background: $tabs-bg-color-hover;
|
|
color: $tabs-font-color-hover;
|
|
cursor: pointer;
|
|
&:before {
|
|
background-color: $tabs-font-color-hover;
|
|
}
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: $tabs-bg-color-hover;
|
|
z-index: 1;
|
|
}
|
|
|
|
& .lang-tabs__icon {
|
|
background-color: $tabs-font-color-hover;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
background: $tabs-bg-color-active;
|
|
color: $tabs-font-color-active;
|
|
&:before {
|
|
background-color: $tabs-font-color-active;
|
|
}
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: $tabs-bg-color-active;
|
|
z-index: 1;
|
|
}
|
|
|
|
& .lang-tabs__icon {
|
|
background-color: $tabs-font-color-active;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|