mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-08 12:28:32 +02:00
Created Dev-portal pages (#1219)
* Created Dev-portal pages * changed structure of documents for dev-portal section, renamed dev-portal to docs, related template changes * keeping learn section for future usage * update dev-portal and documents * added feedback and breadcrumbs components * used the docs-side menu partial on documentation pages, and added active state to the docs-header links * search console on docs * small fixes * assigned partitions, css fix * fix links on the core page * update links for cloud * update links for build * Reference -> API Reference * [WIP] Dev portal light theme (#1250) * light theme - docs side menu * background fix * wip: updating layout * layout update * light theme * card titles with a link * upd page-search package * simplified header * fixes * TOC scroll spy (#1259) * scroll spy on table of contents * packages versions fix * custom scroll spy for toc * make spy work again --------- Co-authored-by: generall <andrey@vasnetsov.com> * limit toc depth to 3 * thin scrollbar * No dev template (#1266) * divided the docs template into smaller partials, increased reusability * removed docs section, moved all to the documentation * review fixes * review fixes --------- Co-authored-by: generall <andrey@vasnetsov.com> * side panel more compact * toc margin bottom fix * Refactoring and renaming (#1277) * renamed and moved partials, fixed link * refactoring: docs-card * fix * fix urls * disable scrollbar on table of content * added scrollbar colors for light theme (#1280) * fix language * Dev portal fixes (#1285) * cards fixes * moved files, fixed paddings * fix for my fix * external header links * fix --------- Co-authored-by: trean <trean.mi@gmail.com> Co-authored-by: Andrey Vasnetsov <andrey@vasnetsov.com> Co-authored-by: davidmyriel <davidmyriel@gmail.com>
This commit is contained in:
nastyapash
co-authored by
generall
trean
davidmyriel
generall
trean
davidmyriel
parent
9704ddb36b
commit
aa1acf0acb
+31
@@ -0,0 +1,31 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.dev-portal-articles-posts {
|
||||
.post {
|
||||
&-preview {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: $spacer;
|
||||
border-radius: $spacer * 0.5;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: math.div($spacer, 4);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&-about {
|
||||
color: $neutral-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.docs-breadcrumbs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: pxToRem(10);
|
||||
padding: 0;
|
||||
margin: 0 0 $spacer * 2.5 0;
|
||||
|
||||
&__crumb {
|
||||
list-style: none;
|
||||
text-transform: capitalize;
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
padding: math.div($spacer, 4) 0;
|
||||
font-weight: 400;
|
||||
|
||||
&:last-child {
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
& > a {
|
||||
color: $neutral-50;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&-separator {
|
||||
list-style: none;
|
||||
height: pxToRem(12);
|
||||
width: pxToRem(12);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 1.5L9 6.5L4 11.5' stroke='%23576280' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='light'] & {
|
||||
&__crumb {
|
||||
&:last-child {
|
||||
color: $neutral-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.docs-feedback {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacer;
|
||||
padding: $spacer * 2.5 0;
|
||||
|
||||
&__title {
|
||||
color: $neutral-98;
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
box-shadow: 0 0 0 pxToRem(1) $neutral-30;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
[data-theme='light'] & {
|
||||
&__title {
|
||||
color: $neutral-20;
|
||||
}
|
||||
&__button {
|
||||
img {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.docs-footer {
|
||||
&__cta {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $spacer * 2.5 0;
|
||||
border-top: 1px solid $neutral-20;
|
||||
border-bottom: 1px solid $neutral-20;
|
||||
color: $neutral-98;
|
||||
|
||||
h4 {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
padding: 0 !important;
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
@extend .footer__bottom;
|
||||
}
|
||||
|
||||
&__bottom-content {
|
||||
@extend .footer__bottom-content;
|
||||
|
||||
& span,
|
||||
& a {
|
||||
color: $neutral-70;
|
||||
font-weight: 400;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: pxToRem(21);
|
||||
}
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom-links {
|
||||
@extend .footer__bottom-links;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__bottom {
|
||||
@extend .footer__bottom;
|
||||
}
|
||||
|
||||
&__bottom-content {
|
||||
@extend .footer__bottom-content;
|
||||
}
|
||||
|
||||
&__cta {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='light'] & {
|
||||
color: $neutral-30;
|
||||
|
||||
&__bottom-content * {
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__cta {
|
||||
border-top-color: $neutral-80;
|
||||
border-bottom-color: $neutral-80;
|
||||
color: $neutral-30;
|
||||
|
||||
h4 {
|
||||
border-color: $neutral-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.docs-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: $neutral-10;
|
||||
z-index: 4;
|
||||
|
||||
.logo {
|
||||
width: pxToRem(148);
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
border-bottom: pxToRem(1) solid $neutral-20;
|
||||
|
||||
&__links {
|
||||
margin-right: auto;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
&-input {
|
||||
width: pxToRem(300);
|
||||
height: pxToRem(35);
|
||||
position: relative;
|
||||
margin-right: $spacer * 1.5;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: $spacer;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
button {
|
||||
height: 100%;
|
||||
padding-left: $spacer * 2.5;
|
||||
color: $neutral-70;
|
||||
text-align: left;
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(18);
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: $spacer;
|
||||
transform: translateY(-50%);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6269_137)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.8335 6.66665C1.8335 3.99727 3.99745 1.83331 6.66683 1.83331C9.33621 1.83331 11.5002 3.99727 11.5002 6.66665C11.5002 7.99157 10.9671 9.19197 10.1037 10.0651C10.097 10.0711 10.0904 10.0773 10.0839 10.0838C10.0775 10.0902 10.0713 10.0968 10.0653 10.1035C9.19215 10.9669 7.99175 11.5 6.66683 11.5C3.99745 11.5 1.8335 9.33602 1.8335 6.66665ZM10.423 11.1299C9.40815 11.9848 8.09765 12.5 6.66683 12.5C3.44517 12.5 0.833496 9.88831 0.833496 6.66665C0.833496 3.44498 3.44517 0.833313 6.66683 0.833313C9.88849 0.833313 12.5002 3.44498 12.5002 6.66665C12.5002 8.09746 11.985 9.40796 11.1301 10.4228L15.0204 14.3131C15.2156 14.5084 15.2156 14.8249 15.0204 15.0202C14.8251 15.2155 14.5085 15.2155 14.3133 15.0202L10.423 11.1299Z' fill='%238F98B3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_6269_137'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-mobile {
|
||||
padding-top: pxToRem(12);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.main-menu {
|
||||
height: $spacer * 5;
|
||||
padding: pxToRem(22) $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.scrolled .main-menu {
|
||||
padding: $spacer * 2 $spacer * 1.5 $spacer * 0.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,289 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.docs {
|
||||
&-core {
|
||||
h2 {
|
||||
padding-top: 0;
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
a.button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: pxToRem(294);
|
||||
height: pxToRem(240);
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-image: url('/img/blurred/blurred-light-17.svg');
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-image: url('/img/blurred/blurred-light-18.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&__hero {
|
||||
width: 100%;
|
||||
padding: $spacer * 1.5 $spacer * 1.5 $spacer * 2;
|
||||
background: linear-gradient(180deg, $neutral-20 0%, rgba(14, 20, 36, 0.1) 100%);
|
||||
text-align: center;
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
border-radius: pxToRem(12);
|
||||
|
||||
&-title {
|
||||
padding-top: 0 !important;
|
||||
margin-bottom: $spacer * 0.5 !important;
|
||||
font-size: pxToRem(32); // take from variables
|
||||
color: $neutral-98;
|
||||
line-height: pxToRem(40);
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 0.5 !important;
|
||||
}
|
||||
|
||||
&-link {
|
||||
margin-bottom: $spacer * 2 !important;
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__developing {
|
||||
&-block {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: $spacer * 1.5 $spacer;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
border-radius: $spacer * 0.5;
|
||||
|
||||
&-text {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
|
||||
h3 {
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
font-weight: 500;
|
||||
padding: 0;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&-image {
|
||||
position: relative;
|
||||
height: $spacer * 10;
|
||||
z-index: 2;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
margin: $spacer * 2 auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2;
|
||||
width: 100%;
|
||||
min-height: pxToRem(240);
|
||||
padding: $spacer * 1.5 $spacer;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
border-radius: pxToRem(12);
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&-title {
|
||||
max-width: pxToRem(400);
|
||||
padding-top: 0 !important;
|
||||
margin-bottom: $spacer * 1.5 !important;
|
||||
font-size: pxToRem(32); // take from variables
|
||||
color: $neutral-98;
|
||||
line-height: pxToRem(40);
|
||||
}
|
||||
|
||||
&-image {
|
||||
position: relative;
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
max-width: pxToRem(360) !important;
|
||||
margin: 0 !important;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&-cloud {
|
||||
&__hero {
|
||||
.dev-portal__hero-image {
|
||||
max-width: pxToRem(459) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__hero {
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
padding: 0 $spacer * 2.5;
|
||||
|
||||
&-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-image {
|
||||
align-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
&-core {
|
||||
&__hero {
|
||||
padding: $spacer * 1.5 pxToRem(120);
|
||||
}
|
||||
&__developing {
|
||||
&-block {
|
||||
padding: 0;
|
||||
|
||||
&-text {
|
||||
text-align: left;
|
||||
|
||||
h3,
|
||||
a {
|
||||
margin-left: $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
&-image {
|
||||
img {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__article {
|
||||
width: calc(100% - 256px);
|
||||
min-height: calc(100vh - 80px);
|
||||
padding: $spacer * 1.5 $spacer * 5 0;
|
||||
margin: 0 0 0 pxToRem(256);
|
||||
border-left: pxToRem(1) solid $neutral-20;
|
||||
|
||||
&-content {
|
||||
width: calc(100% - 232px);
|
||||
padding-right: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&-table {
|
||||
width: pxToRem(232);
|
||||
}
|
||||
}
|
||||
}
|
||||
[data-theme='light'] & {
|
||||
.docs-core__hero {
|
||||
background: linear-gradient(180deg, $neutral-20 0%, $neutral-10 100%);
|
||||
color: $neutral-70;
|
||||
&-title {
|
||||
color: $neutral-98;
|
||||
}
|
||||
.button_outlined {
|
||||
color: $neutral-100;
|
||||
box-shadow: 0 0 0 1px $neutral-60;
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 2px $neutral-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
.docs-core__developing-block {
|
||||
h3 {
|
||||
color: $neutral-98;
|
||||
}
|
||||
.button_outlined {
|
||||
color: $neutral-100;
|
||||
box-shadow: 0 0 0 1px $neutral-60;
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 2px $neutral-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__hero-content {
|
||||
h1 {
|
||||
color: $neutral-98;
|
||||
}
|
||||
.button_outlined {
|
||||
color: $neutral-100;
|
||||
box-shadow: 0 0 0 1px $neutral-60;
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 2px $neutral-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__article {
|
||||
border-left-color: $neutral-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use '../../mixins/mixins' as *;
|
||||
|
||||
.documentation-article {
|
||||
padding-bottom: $spacer * 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
h1 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer;
|
||||
padding-top: $spacer * 0.5;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-size: $spacer * 1.5;
|
||||
font-weight: 500;
|
||||
line-height: pxToRem(34);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer;
|
||||
padding-top: $spacer * 0.5;
|
||||
}
|
||||
|
||||
p,
|
||||
summary {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
a:not([class]):hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include content-image($font-size-sm, $neutral-90, $spacer);
|
||||
|
||||
li:not(:last-of-type) {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
code:not([class]) {
|
||||
padding: pxToRem(4);
|
||||
color: $neutral-90;
|
||||
background-color: $neutral-20;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
.table {
|
||||
@extend .table-dark;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
background: inherit;
|
||||
img {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='light'] {
|
||||
.documentation-article {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
code:not([class]) {
|
||||
color: $neutral-20;
|
||||
background-color: #d9e2fe;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
.table {
|
||||
@extend .table-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+368
@@ -0,0 +1,368 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.docs-menu {
|
||||
background-color: $neutral-20;
|
||||
border-top: 1px solid $neutral-30;
|
||||
margin: 0 (-$spacer) $spacer * 2;
|
||||
scrollbar-width: thin;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: pxToRem(15) pxToRem(20);
|
||||
cursor: pointer;
|
||||
.docs-menu__button svg {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.docs-menu__button svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
font-weight: 400;
|
||||
color: $neutral-90;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: none;
|
||||
padding: pxToRem(12) $spacer * 1.5;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
position: relative;
|
||||
margin: $spacer * 2 0;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: $spacer;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
button {
|
||||
padding-left: $spacer * 2.5;
|
||||
color: $neutral-70;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: $spacer;
|
||||
height: $spacer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: $spacer;
|
||||
transform: translateY(-50%);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6269_137)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.8335 6.66665C1.8335 3.99727 3.99745 1.83331 6.66683 1.83331C9.33621 1.83331 11.5002 3.99727 11.5002 6.66665C11.5002 7.99157 10.9671 9.19197 10.1037 10.0651C10.097 10.0711 10.0904 10.0773 10.0839 10.0838C10.0775 10.0902 10.0713 10.0968 10.0653 10.1035C9.19215 10.9669 7.99175 11.5 6.66683 11.5C3.99745 11.5 1.8335 9.33602 1.8335 6.66665ZM10.423 11.1299C9.40815 11.9848 8.09765 12.5 6.66683 12.5C3.44517 12.5 0.833496 9.88831 0.833496 6.66665C0.833496 3.44498 3.44517 0.833313 6.66683 0.833313C9.88849 0.833313 12.5002 3.44498 12.5002 6.66665C12.5002 8.09746 11.985 9.40796 11.1301 10.4228L15.0204 14.3131C15.2156 14.5084 15.2156 14.8249 15.0204 15.0202C14.8251 15.2155 14.5085 15.2155 14.3133 15.0202L10.423 11.1299Z' fill='%238F98B3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_6269_137'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
padding: 0;
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
width: pxToRem(24);
|
||||
height: pxToRem(24);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__links {
|
||||
&-title {
|
||||
margin-bottom: 0;
|
||||
padding: math.div($spacer, 2);
|
||||
color: $neutral-98;
|
||||
font-weight: bold;
|
||||
font-size: $spacer;
|
||||
line-height: $spacer * 1.5;
|
||||
|
||||
&:not(:nth-of-type(1)) {
|
||||
margin-top: pxToRem(12);
|
||||
padding-top: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
&-group {
|
||||
&-heading {
|
||||
display: block;
|
||||
position: relative;
|
||||
// hide native details marker
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $neutral-70;
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
summary:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: pxToRem(10);
|
||||
height: pxToRem(10);
|
||||
position: absolute;
|
||||
top: pxToRem(10);
|
||||
right: $spacer;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='10' height='11' viewBox='0 0 10 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.832764 3.41669L4.99943 7.58335L9.1661 3.41669' stroke='%238F98B3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.docs-menu__links-group-heading > a {
|
||||
font-weight: 600;
|
||||
background-color: $neutral-30;
|
||||
color: $neutral-90;
|
||||
border-radius: $spacer * 0.5;
|
||||
}
|
||||
|
||||
summary:after {
|
||||
top: pxToRem(10);
|
||||
}
|
||||
}
|
||||
|
||||
&[open=''] {
|
||||
summary:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: math.div($spacer, 4) $spacer * 1.5 math.div($spacer, 4) math.div($spacer, 2);
|
||||
// margin-bottom: math.div($spacer, 4);
|
||||
}
|
||||
|
||||
&.external-link {
|
||||
.docs-menu__links-group-heading {
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: pxToRem(10);
|
||||
height: pxToRem(10);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $spacer;
|
||||
background: url('/icons/outline/external-link.svg') no-repeat;
|
||||
background-size: contain;
|
||||
margin-top: $spacer * -0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-submenu {
|
||||
margin-bottom: 0;
|
||||
padding-left: $spacer;
|
||||
|
||||
&-item {
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $neutral-70;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: pxToRem(21);
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
height: calc(100vh - 80px);
|
||||
width: pxToRem(256);
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
overflow-x: hidden;
|
||||
top: $spacer * 5;
|
||||
padding: $spacer $spacer $spacer;
|
||||
background-color: transparent;
|
||||
border-top: none;
|
||||
margin: 0;
|
||||
border-right: pxToRem(1) solid $neutral-20;
|
||||
|
||||
&__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__links {
|
||||
&-title {
|
||||
&:not(:nth-of-type(1)) {
|
||||
border-top: pxToRem(1) solid $neutral-20;
|
||||
}
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
padding-bottom: $spacer;
|
||||
border-bottom: pxToRem(1) solid $neutral-20;
|
||||
}
|
||||
}
|
||||
|
||||
&__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='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M0.833374 1.4165L5.00004 5.58317L9.16671 1.4165' stroke='%2328324D' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.docs-menu__links-group-heading > a {
|
||||
color: $primary-50;
|
||||
background: $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
&[open=''] {
|
||||
summary:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
svg path {
|
||||
fill: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
&-submenu {
|
||||
&-item {
|
||||
a {
|
||||
color: $neutral-30;
|
||||
|
||||
&:hover {
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__links > :last-child,
|
||||
&__links-title:not(:nth-of-type(1)) {
|
||||
border-color: $neutral-80;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
border-right-color: $neutral-80;
|
||||
|
||||
&__links-group {
|
||||
&.active {
|
||||
.docs-menu__links-group-heading > a {
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
&.external-link {
|
||||
.docs-menu__links-group-heading {
|
||||
&:after {
|
||||
mask: url('/icons/outline/external-link.svg') no-repeat;
|
||||
-webkit-mask: url('/icons/outline/external-link.svg') no-repeat;
|
||||
mask-size: contain;
|
||||
-webkit-mask-size: contain;
|
||||
background: $neutral-30;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.documentation {
|
||||
background-color: $neutral-10;
|
||||
min-height: calc(100vh - 80px);
|
||||
color: $neutral-70;
|
||||
|
||||
&__container {
|
||||
@extend .container;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
&__article-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
&__content-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__container {
|
||||
max-width: 100vw !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__content {
|
||||
$side-menu-width: pxToRem(256);
|
||||
width: calc(100% - #{$side-menu-width});
|
||||
padding: $spacer * 1.5 $spacer * 2.5 $spacer * 3.5;
|
||||
}
|
||||
&__content-wrapper {
|
||||
max-width: calc(1136px - $spacer * 2.5 * 1.5);
|
||||
margin: 0 auto;
|
||||
}
|
||||
&__article-wrapper {
|
||||
$toc-width: pxToRem(232);
|
||||
width: calc(100% - #{$toc-width});
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='light'] & {
|
||||
background-color: $neutral-94;
|
||||
color: $neutral-30;
|
||||
|
||||
.button_outlined {
|
||||
color: $neutral-30;
|
||||
box-shadow: 0 0 0 1px $neutral-70;
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 2px $neutral-70;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.docs-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: pxToRem(12);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: pxToRem(456);
|
||||
margin: 0 auto;
|
||||
padding: $spacer * 1.5;
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
background: linear-gradient(180deg, $neutral-20 0%, rgba(14, 20, 36, 0.1) 100%);
|
||||
border-radius: pxToRem(12);
|
||||
overflow: hidden;
|
||||
color: $neutral-70;
|
||||
|
||||
&__tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
color: $secondary-blue-50;
|
||||
|
||||
&_violet {
|
||||
color: $secondary-violet-50;
|
||||
}
|
||||
&_teal {
|
||||
color: $secondary-teal-50;
|
||||
}
|
||||
}
|
||||
|
||||
img.docs-card__icon {
|
||||
width: $spacer * 1.5;
|
||||
height: $spacer * 1.5;
|
||||
margin: 0;
|
||||
// :has() selector only works in newer versions of browsers
|
||||
// but in this case it has just minor visual effect
|
||||
&:has(+ span) {
|
||||
width: auto;
|
||||
height: $spacer * 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
img.docs-card__image {
|
||||
$correctingMargin: $spacer * -1.5;
|
||||
width: calc(100% + $spacer * 3);
|
||||
max-width: none;
|
||||
margin: $correctingMargin $correctingMargin $spacer * 0.75 $correctingMargin;
|
||||
}
|
||||
|
||||
&__title,
|
||||
h3.docs-card__title {
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-98;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__description,
|
||||
p.docs-card__description {
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
margin: 0;
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
margin: auto 0 0 auto;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
margin-top: pxToRem(12);
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.33337L14.6667 8.00004L10 12.6667' stroke='%238F98B3' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.33331 8H14.6666' stroke='%238F98B3' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
a.docs__card-link {
|
||||
margin: 0 0 $spacer * 2 $spacer * 1.5;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(180deg, $neutral-20 0%, #0e1424 100%);
|
||||
|
||||
.docs-card__arrow:after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0001 3.33337L14.6667 8.00004L10.0001 12.6667' stroke='%23DC244C' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.33337 8.00006H14.6667' stroke='%23DC244C' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.docs-card__link {
|
||||
$icon-width: pxToRem(20);
|
||||
padding-right: calc($icon-width + 6px);
|
||||
&:after {
|
||||
animation: dash 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
&:before {
|
||||
animation: dash 0.3s ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
[data-theme='light'] & {
|
||||
background: $neutral-98;
|
||||
border-color: $neutral-90;
|
||||
color: $neutral-10;
|
||||
|
||||
.docs-card__title {
|
||||
color: $neutral-10;
|
||||
}
|
||||
&:hover {
|
||||
.docs-card__title {
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user