Compare commits
18 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Elena Rechkina
|
d453dafa98 | ||
|
Elena Rechkina
|
2f52c8f24b | ||
|
Elena Rechkina
|
55ff178299 | ||
|
Elena Rechkina
|
07cae0943d | ||
|
Rusovich Violetta
|
20f7ee60e9 | ||
|
Rusovich Violetta
|
476d5768bd | ||
|
Rusovich Violetta
|
6d650b35c6 | ||
|
Rusovich Violetta
|
8ff199b4ab | ||
|
Бурденко Алексей
|
b6065c2fa4 | ||
|
Бурденко Алексей
|
3e14bf2b54 | ||
|
Бурденко Алексей
|
2e923d3abb | ||
|
Бурденко Алексей
|
ea041a1a24 | ||
|
Rusovich Violetta
|
0471aaaa04 | ||
|
Rusovich Violetta
|
b21b1fb831 | ||
|
Бурденко Алексей
|
71aeec09df | ||
|
Дмитрий Захаров
|
d595575c1f | ||
|
Дмитрий Захаров
|
dcf4f06125 | ||
|
Дмитрий Захаров
|
255f2ffe9d |
@@ -14,7 +14,3 @@ src/.vuepress/.cache
|
||||
src/.vuepress/.temp
|
||||
src/.vitepress/cache
|
||||
packages-list.json
|
||||
/.vale
|
||||
/.vscode
|
||||
/.vale.ini
|
||||
/.markdownlint.json
|
||||
@@ -1,6 +1,6 @@
|
||||
deploy-test-stand:
|
||||
stage: deploy
|
||||
image: harbor.vimpelcom.ru/dockerhub/library/alpine:3.21.2
|
||||
image: harbor.vimpelcom.ru/dockerhub/library/alpine
|
||||
variables:
|
||||
stand: cloud-stand.vega-dev.cloud.vimpelcom.ru
|
||||
rules:
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
deploy-prod:
|
||||
stage: deploy
|
||||
image: harbor.vimpelcom.ru/dockerhub/library/alpine:3.21.2
|
||||
variables:
|
||||
stand: beecloud-docs.beecloud-docs.cloud.vimpelcom.ru
|
||||
rules:
|
||||
- if: $CI_COMMIT_BRANCH && $CI_PIPELINE_SOURCE == "merge_request_event"
|
||||
when: never
|
||||
- if: $CI_PIPELINE_SOURCE == "push"
|
||||
when: manual
|
||||
before_script:
|
||||
- |
|
||||
sed -i s%https://dl-cdn.alpinelinux.org/%http://rhrepo.vimpelcom.ru/ext/ya/mirrors/% /etc/apk/repositories && \
|
||||
apk --no-cache add tzdata ca-certificates curl openssh-client yq jq && \
|
||||
rm -rf /var/cache/apk/*
|
||||
- which ssh-agent || (apt-get update -y && apt-get install openssh-client -y)
|
||||
- eval $(ssh-agent -s)
|
||||
- mkdir -p ~/.ssh
|
||||
- echo -n "$TECH_SSH_KEY" | tr -d '\r' > ~/.ssh/id_rsa
|
||||
- chmod 700 ~/.ssh
|
||||
- chmod 600 ~/.ssh/id_rsa
|
||||
- >
|
||||
echo "stand: ${stand}"
|
||||
ssh-keyscan "${stand}" >> ~/.ssh/known_hosts
|
||||
- chmod 644 ~/.ssh/known_hosts
|
||||
- PRODUCT="$PRODUCT_DMZ"
|
||||
script:
|
||||
- >
|
||||
echo -e "Connect to ${stand}..." &&
|
||||
scp -o StrictHostKeyChecking=no ci/deploy/deploy.sh "dorootless@${stand}:~/deploy.sh" &&
|
||||
ssh "dorootless@${stand}" "export CONTAINER_REGISTRY=$CONTAINER_REGISTRY &&
|
||||
export PRODUCT=$PRODUCT &&
|
||||
export PRODUCT_VERSION=$PRODUCT_VERSION &&
|
||||
export IMAGE_NAME=$IMAGE_NAME &&
|
||||
chmod 700 ~/deploy.sh &&
|
||||
~/deploy.sh ${IMAGE_NAME} &&
|
||||
rm -f ~/deploy.sh"
|
||||
needs:
|
||||
- job: build-image
|
||||
optional: true
|
||||
@@ -23,7 +23,7 @@
|
||||
# - git push origin HEAD:$CI_COMMIT_REF_NAME -o ci.skip
|
||||
|
||||
.deploy-template:
|
||||
image: harbor.vimpelcom.ru/dockerhub/library/alpine:3.21.2
|
||||
image: harbor.vimpelcom.ru/dockerhub/library/alpine
|
||||
before_script:
|
||||
- |
|
||||
sed -i s%https://dl-cdn.alpinelinux.org/%http://rhrepo.vimpelcom.ru/ext/ya/mirrors/% /etc/apk/repositories && \
|
||||
|
||||
Generated
+1357
-1987
File diff suppressed because it is too large
Load Diff
+12
-13
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "docs",
|
||||
"version": "0.6.5-main",
|
||||
"description": "Beeline Cloud docs",
|
||||
"version": "0.6.1",
|
||||
"description": "Vega docs portal",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "vitepress dev src",
|
||||
@@ -15,17 +15,16 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@beeline/design-tokens": "^1.31.6",
|
||||
"vue": "^3.5.0"
|
||||
"@beeline/design-tokens": "^1.31.0",
|
||||
"vue": "3.4.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@docsearch/css": "4.1.0",
|
||||
"@types/node": "^22.0.0",
|
||||
"@vitejs/plugin-vue": "^6.0.3",
|
||||
"sass": "^1.70.0",
|
||||
"typescript": "^5.9.3",
|
||||
"vite-plugin-static-copy": "^3.1.4",
|
||||
"vitepress": "^1.6.4",
|
||||
"vitepress-plugin-tabs": "^0.7.3"
|
||||
"@docsearch/css": "3.3.0",
|
||||
"@types/node": "20.10.7",
|
||||
"@vitejs/plugin-vue": "4.3.4",
|
||||
"sass": "1.69.7",
|
||||
"typescript": "^5.8.3",
|
||||
"vitepress": "1.0.0-rc.40",
|
||||
"vitepress-plugin-tabs": "0.5.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+73
-247
@@ -1,9 +1,6 @@
|
||||
import { defineConfig } from 'vitepress'
|
||||
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
|
||||
import { viteStaticCopy } from 'vite-plugin-static-copy'
|
||||
import { overrideComponents } from './override-components'
|
||||
import { resolve } from 'node:path'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
const gitlab = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
@@ -45,12 +42,10 @@ console.log({ base: typeof new_version !== 'undefined' ? '/' : '/docs/' })
|
||||
|
||||
// https://vitepress.dev/reference/site-config
|
||||
export default defineConfig({
|
||||
srcDir: ".",
|
||||
title: " ",
|
||||
title: "Beeline Cloud",
|
||||
description: "Документация Beeline Cloud",
|
||||
head: [['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/bee-favicon.png' }]],
|
||||
base: typeof new_version !== 'undefined' ? '/' : '/docs/',
|
||||
appearance: false,
|
||||
markdown: {
|
||||
config(md) {
|
||||
md.use(tabsMarkdownPlugin)
|
||||
@@ -58,31 +53,8 @@ export default defineConfig({
|
||||
},
|
||||
vite: {
|
||||
resolve: {
|
||||
alias: [
|
||||
...overrideComponents(),
|
||||
{
|
||||
find: '@',
|
||||
replacement: fileURLToPath(new URL('./theme', import.meta.url))
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
viteStaticCopy({
|
||||
targets: [
|
||||
{
|
||||
src: resolve(__dirname, '../../node_modules/@beeline/design-tokens/assets/fonts'),
|
||||
dest: 'assets',
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
api: 'modern-compiler',
|
||||
},
|
||||
},
|
||||
},
|
||||
alias: overrideComponents(),
|
||||
}
|
||||
},
|
||||
locales: {
|
||||
root: {
|
||||
@@ -91,11 +63,7 @@ export default defineConfig({
|
||||
}
|
||||
},
|
||||
themeConfig: {
|
||||
logo: {
|
||||
light: '/img/logo-cloud.svg',
|
||||
dark: '/img/logo-cloud.svg',
|
||||
alt: '',
|
||||
},
|
||||
logo: '/favicon.svg',
|
||||
search: {
|
||||
provider: 'local',
|
||||
options: {
|
||||
@@ -107,8 +75,14 @@ export default defineConfig({
|
||||
buttonAriaLabel: 'Поиск'
|
||||
},
|
||||
modal: {
|
||||
noResultsText: 'По вашему запросу ничего не найдено',
|
||||
noResultsText: 'Нет результатов для',
|
||||
resetButtonTitle: 'Сбросить',
|
||||
displayDetails: 'Показать расширенный список',
|
||||
footer: {
|
||||
selectText: 'Выбрать',
|
||||
closeText: 'Закрыть',
|
||||
navigateText: 'Перейти',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -116,27 +90,30 @@ export default defineConfig({
|
||||
}
|
||||
},
|
||||
// https://vitepress.dev/reference/default-theme-config
|
||||
// nav: [
|
||||
// {
|
||||
// text: 'Документация',
|
||||
// link: '/guide/',
|
||||
// },
|
||||
// {
|
||||
// text: 'API',
|
||||
// link: '',
|
||||
// },
|
||||
// {
|
||||
// text: 'Terraform',
|
||||
// // link: '/terraform/',
|
||||
// link: '',
|
||||
// },
|
||||
// ],
|
||||
// nav: [
|
||||
// ],
|
||||
|
||||
// socialLinks: [
|
||||
// { icon: { svg: gitlab }, link: 'https://git.vimpelcom.ru/common/vega/docs' }
|
||||
// ],
|
||||
|
||||
// editLink: {
|
||||
// pattern: 'https://git.vimpelcom.ru/-/ide/project/common/vega/docs/edit/develop/-/src/:path',
|
||||
// text: 'Отредактируйте эту страницу на GitLab'
|
||||
// },
|
||||
|
||||
docFooter: {
|
||||
next: 'Вперед',
|
||||
prev: 'Назад'
|
||||
},
|
||||
|
||||
// lastUpdated: {
|
||||
// text: 'Обновлена',
|
||||
// formatOptions: {
|
||||
// dateStyle: 'long',
|
||||
// }
|
||||
// },
|
||||
|
||||
outline: {
|
||||
label: 'Содержание'
|
||||
},
|
||||
@@ -146,7 +123,7 @@ export default defineConfig({
|
||||
text: 'Платформа Beeline Cloud', link: '/platform/index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{text: 'Обзор', link: '/platform/about.md'},
|
||||
{text: 'Сервисы', link: '/platform/services/services.md'},
|
||||
{text: 'Техническая поддержка', link: '/platform/support/support-overview.md'},
|
||||
],
|
||||
},
|
||||
@@ -154,225 +131,74 @@ export default defineConfig({
|
||||
'/start/': [
|
||||
{
|
||||
text: 'Начало работы в Beeline Cloud', link: '/start/index.md',
|
||||
},
|
||||
{text: 'Начать работу', link: '/start/getting-started.md'},
|
||||
{text: 'Бесплатный период', link: '/start/trial.md'},
|
||||
{text: 'Платное использование', link: '/start/organization.md'},
|
||||
],
|
||||
collapsed: true,
|
||||
items: [
|
||||
{text: 'Начать работу', link: '/start/getting-started.md'},
|
||||
{text: 'Бесплатный период', link: '/start/trial.md'},
|
||||
{text: 'Платное использование', link: '/start/organization.md'},
|
||||
],
|
||||
},
|
||||
],
|
||||
// '/billing/': [
|
||||
|
||||
// ],
|
||||
'/backups/': [
|
||||
{
|
||||
text: 'Резервное копирование', link: '/backups/index.md',
|
||||
},
|
||||
{
|
||||
text: 'Обзор сервиса', link: '/backups/backups-overview.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{text: 'О сервисе', link: '/backups/about.md'},
|
||||
{text: 'Квоты и лимиты', link: '/backups/backup-quatos.md'},
|
||||
]
|
||||
},
|
||||
{text: 'Резервное копирование виртуальных машин Beeline Cloud', link: '/backups/backup-internal-infra.md'},
|
||||
{text: 'Резервное копирование собственной инфраструктуры в Beeline Cloud', link: '/backups/backup-external-infra.md'},
|
||||
{text: 'Каталог резервных копий', link: '/backups/view-backups.md'},
|
||||
|
||||
],
|
||||
'/vdc/': [
|
||||
{
|
||||
text: 'Виртуальные дата-центры на VMware', link: '/vdc/index.md',
|
||||
},
|
||||
{
|
||||
text: 'Обзор сервиса', link: '/vdc/vdc-overview.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'О сервисе', link: '/vdc/vdc-about.md' },
|
||||
{ text: 'Техническое описание', link: '/vdc/vdc-tech.md' },
|
||||
{ text: 'Квоты и лимиты', link: '/vdc/vdc-quatos.md' },
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Быстрый старт', link: '/vdc/vdc-getting-started.md'
|
||||
},
|
||||
|
||||
{ text: 'Виртуальные дата-центры', link: '/vdc/vdc-how-to/vdc-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
text: 'Виртуальные дата-центры на VMware', link: '/vdc/index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{text: 'Обзор сервиса', link: '/vdc/vdc-overview.md'},
|
||||
{text: 'Быстрый старт', link: '/vdc/vdc-getting-started.md'},
|
||||
{text: 'Виртуальные дата-центры', link: '/vdc/vdc-how-to/vdc-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'Создание дата-центра', link: '/vdc/vdc-how-to/vdc-create.md' },
|
||||
{ text: 'Вход в дата-центр', link: '/vdc/vdc-how-to/vdc-enter.md' },
|
||||
{ text: 'Управление дата-центром', link: '/vdc/vdc-how-to/vdc-manage.md'},
|
||||
],
|
||||
},
|
||||
{ text: 'Виртуальные машины', link: '/vdc/vdc-how-to/vm/vm-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{text: 'Создание ВМ', link: '/vdc/vdc-how-to/vm/create-vm.md'},
|
||||
{text: 'Создание vApp', link: '/vdc/vdc-how-to/vm/create-vapp.md'},
|
||||
{text: 'Управление состоянием ВМ', link: '/vdc/vdc-how-to/vm/manage-vm.md'},
|
||||
{text: 'Клонирование ВМ', link: '/vdc/vdc-how-to/vm/clone-vm.md'},
|
||||
{text: 'Изменение конфигурации ВМ', link: '/vdc/vdc-how-to/vm/edit-vm.md'},
|
||||
{text: 'Удаление ВМ', link: '/vdc/vdc-how-to/vm/delete-vm.md'},
|
||||
{text: 'Группы размещения', link: '/vdc/vdc-how-to/vm/create-affinity-rules.md'},
|
||||
{text: 'Снимки ВМ', link: '/vdc/vdc-how-to/vm/create-snapshot.md'},
|
||||
{text: 'VMware Tools', link: '/vdc/vdc-how-to/vm/vmware-tools.md'},
|
||||
],
|
||||
},
|
||||
{ text: 'Диски', link: '/vdc/vdc-how-to/disks/disks-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{text: 'Обзор', link: '/vdc/vdc-how-to/disks/about.md'},
|
||||
{text: 'Создание диска', link: '/vdc/vdc-how-to/disks/create-disk.md'},
|
||||
{text: 'Проверка состояния диска', link: '/vdc/vdc-how-to/disks/view-disk.md'},
|
||||
{text: 'Управление выделенными дисками', link: '/vdc/vdc-how-to/disks/attach-disk.md'},
|
||||
{text: 'Изменение политики хранения дисков ВМ', link: '/vdc/vdc-how-to/disks/change-storage-policy-of-vm.md'},
|
||||
{text: 'Редактирование параметров диска', link: '/vdc/vdc-how-to/disks/edit-disk.md'},
|
||||
{text: 'Удаление диска', link: '/vdc/vdc-how-to/disks/delete-disk.md'},
|
||||
],
|
||||
},
|
||||
{ text: 'Сети', link: '/vdc/vdc-how-to/networks/networks-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{text: 'Обзор', link: '/vdc/vdc-how-to/networks/about.md'},
|
||||
{text: 'Настройка доступа к ВМ из интернета', link: '/vdc/vdc-how-to/networks/allow-external-connections-to-vm.md'},
|
||||
{text: 'Подключение ВМ в vApp к сети', link: '/vdc/vdc-how-to/networks/connect-vapp-to-network.md'},
|
||||
{text: 'Подключение ВМ к интернету', link: '/vdc/vdc-how-to/networks/connect-vm-to-network.md'},
|
||||
{text: 'Создание сети в организации и подключение к Edge Gateway', link: '/vdc/vdc-how-to/networks/create-network.md'},
|
||||
{text: 'Подключение сети к Edge Gateway', link: '/vdc/vdc-how-to/networks/connect-to-edge-gateway.md'},
|
||||
{text: 'Создание Pre-Shared Key', link: '/vdc/vdc-how-to/networks/create-psk.md'},
|
||||
{ text: 'Настройка site-to-site подключения с помощью IPSec', link: '/vdc/vdc-how-to/networks/how-to-setup-ipsec-vpn.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{text: 'Настройка IPSec VPN', link: '/vdc/vdc-how-to/networks/ipsec/setup-ipsec-vpn.md'},
|
||||
{text: 'Настройка ASAv', link: '/vdc/vdc-how-to/networks/ipsec/asav.md'},
|
||||
{text: 'Настройка CSR 1000v', link: '/vdc/vdc-how-to/networks/ipsec/csr1000v.md'},
|
||||
{text: 'Настройка Fortigate', link: '/vdc/vdc-how-to/networks/ipsec/fortigate.md'},
|
||||
{text: 'Проверить сетевую связанность', link: '/vdc/vdc-how-to/networks/ipsec/check-vpn-status.md'},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ text: 'Пользователи и роли', link: '/vdc/vdc-how-to/users/users-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{text: 'Ролевая модель', link: '/vdc/vdc-how-to/users/roles.md'},
|
||||
{text: 'Создание пользователя', link: '/vdc/vdc-how-to/users/add-user.md'},
|
||||
{text: 'Изменение пароля пользователя', link: '/vdc/vdc-how-to/users/change-users-password.md'},
|
||||
{text: 'Настройка квот', link: '/vdc/vdc-how-to/users/quotas.md'},
|
||||
],
|
||||
},
|
||||
{ text: 'Управление дата-центром', link: '/vdc/vdc-how-to/vdc-manage.md' },
|
||||
{ text: 'Двухфакторная аутентификация', link: '/vdc/vdc-how-to/vdc-2fa.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{text: 'Подключение 2FA', link: '/vdc/vdc-how-to/vdc-2fa-start.md'},
|
||||
{text: 'Управление 2FA', link: '/vdc/vdc-how-to/vdc-2fa-manage.md'},
|
||||
{text: 'Подключение 2FA', link: '/vdc/vdc-how-to/vdc-2fa-start.md'},
|
||||
{text: 'Управление 2FA', link: '/vdc/vdc-how-to/vdc-2fa-manage.md'},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
// { text: 'Тарификация', link: '/vdc/vdc-tarif.md' },
|
||||
],
|
||||
|
||||
// { text: 'Тарификация', link: '/vdc/vdc-tarif.md' },
|
||||
},
|
||||
],
|
||||
'/compute/': [
|
||||
{
|
||||
text: 'Виртуальные машины', link: '/compute/index.md',
|
||||
},
|
||||
{ text: 'Обзор сервиса', link: '/compute/compute-overview-index.md' ,
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'Техническое описание', link: '/compute/compute-overview.md' },
|
||||
{ text: 'Квоты и лимиты', link: '/compute/compute-quatos.md' },
|
||||
]
|
||||
},
|
||||
{text: 'Быстрый старт', link: '/compute/compute-getting-started.md'},
|
||||
{ text: 'Виртуальные машины', link: '/compute/compute-how-to/compute-index.md',
|
||||
collapsed: true,
|
||||
text: 'Виртуальные машины', link: '/compute/index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{text: 'Обзор сервиса', link: '/compute/compute-overview.md'},
|
||||
// {text: 'Быстрый старт', link: '/compute/compute-getting-started.md'},
|
||||
{text: 'Виртуальные машины', link: '/compute/compute-how-to/compute-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'Создание ВМ', link: '/compute/compute-how-to/compute-servers-create.md' },
|
||||
{ text: 'Создание ВМ джамп-хоста', link: '/compute/compute-how-to/compute-servers-jump-create.md' },
|
||||
{ text: 'Подключение к ВМ', link: '/compute/compute-how-to/compute-connect-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'Подключение по SSH по внешнему IP-адресу с помощью ключевой пары', link: '/compute/compute-how-to/compute-connect-public.md'},
|
||||
{ text: 'Подключение по SSH по внутреннему IP-адресу с помощью ключевой пары', link: '/compute/compute-how-to/compute-connect-inside.md' },
|
||||
{ text: 'Подключение по SSH по логину и паролю', link: '/compute/compute-how-to/compute-connect-pwd.md' },
|
||||
]
|
||||
},
|
||||
{ text: 'Подключение к ВМ', link: '/compute/compute-how-to/compute-connect.md' },
|
||||
{ text: 'Управление ВМ', link: '/compute/compute-how-to/compute-servers-manage.md' },
|
||||
],
|
||||
},
|
||||
{ text: 'Диски', link: '/compute/compute-how-to/compute-disks/compute-disk-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'Обзор', link: '/compute/compute-how-to/compute-disks/compute-disk-about.md' },
|
||||
{ text: 'Создание диска', link: '/compute/compute-how-to/compute-disks/compute-disk-create.md' },
|
||||
{ text: 'Управление дисками', link: '/compute/compute-how-to/compute-disks/compute-disk-manage.md' },
|
||||
{ text: 'Удаление диска', link: '/compute/compute-how-to/compute-disks/compute-disk-del.md' },
|
||||
]
|
||||
},
|
||||
{ text: 'IP-адреса', link: '/compute/compute-how-to/compute-ip/compute-ip-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'Обзор', link: '/compute/compute-how-to/compute-ip/compute-ip-about.md' },
|
||||
{ text: 'Просмотр IP-адресов', link: '/compute/compute-how-to/compute-ip/compute-ip-view.md' },
|
||||
{ text: 'Создание IP-адреса', link: '/compute/compute-how-to/compute-ip/compute-ip-create.md' },
|
||||
{ text: 'Управление IP-адресами', link: '/compute/compute-how-to/compute-ip/compute-ip-manager.md' },
|
||||
{ text: 'Удаление IP-адреса', link: '/compute/compute-how-to/compute-ip/compute-ip-del.md' },
|
||||
]
|
||||
},
|
||||
{ text: 'Группы размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'Обзор', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-about.md'},
|
||||
{ text: 'Создание группы размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-create.md'},
|
||||
{ text: 'Управление группами размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-manager.md' },
|
||||
{ text: 'Удаление группы размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-del.md' },
|
||||
]
|
||||
},
|
||||
{ text: 'Сети', link: '/compute/compute-how-to/compute-network/compute-network-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'Настройка site-to-site VPN с помощью VyOS', link: '/compute/compute-how-to/compute-network/compute-vpn-vyos.md' },
|
||||
{ text: 'Подключение ВМ закрытого контура к интернету', link: '/compute/compute-how-to/compute-network/compute-network-inside.md' },
|
||||
{ text: 'Диски', link: '/compute/compute-how-to/compute-disks.md' },
|
||||
{ text: 'IP-адреса', link: '/compute/compute-how-to/compute-ip.md' },
|
||||
{ text: 'Группы размещения', link: '/compute/compute-how-to/compute-affinity.md' },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
],
|
||||
'/admin/': [
|
||||
{
|
||||
text: 'Администрирование', link: '/admin/index.md',
|
||||
},
|
||||
{text: 'Управление ключевыми парами', link: '/admin/ssh.md'},
|
||||
],
|
||||
'/vdi/': [
|
||||
{
|
||||
text: 'Виртуальные рабочие столы', link: '/vdi/index.md',
|
||||
text: 'Аккаунт Beeline Cloud', link: '/admin/acc-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{text: 'Управление ключевыми парами', link: '/admin/ssh.md'},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Обзор сервиса', link: '/vdi/vdi-overview.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'О сервисе', link: '/vdi/vdi-about.md' },
|
||||
{ text: 'Техническое описание', link: '/vdi/vdi-tech.md' },
|
||||
{ text: 'Квоты и лимиты', link: '/vdi/vdi-quatos.md' },
|
||||
{ text: 'Тарификация', link: '/vdi/vdi-tarif.md' },
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Заказ виртуальных рабочих столов', link: '/vdi/vdi-how-to/vdi-create.md'
|
||||
},
|
||||
{
|
||||
text: 'Настройка сервиса', link: '/vdi/vdi-how-to/vdi-nastroika.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'Настройка интеграции с Active Directory', link: '/vdi/vdi-how-to/vdi-connect-to-ad.md' },
|
||||
{ text: 'Настройка сети', link: '/vdi/vdi-how-to/vdi-interconnect.md' },
|
||||
]
|
||||
},
|
||||
// {
|
||||
// text: 'Gold-образ', link: '/vdi/vdi-how-to/vdi-gold.md'
|
||||
// },
|
||||
{
|
||||
text: 'Подключение к виртуальному рабочему месту', link: '/vdi/vdi-how-to/vdi-connect.md'
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -106,7 +106,7 @@ export default function(parameters: IParameters) {
|
||||
// window._paq elsewhere when needed, including closure scopes.
|
||||
const _paq = window._paq;
|
||||
// If user requests consent checking, do this before we actually track.
|
||||
// tip: this doesn't work at the moment because the user has no way to set
|
||||
// Note: this doesn't work at the moment because the user has no way to set
|
||||
// whether consent was given. Oops.
|
||||
if (requireConsent) {
|
||||
_paq.push(['requireConsent']);
|
||||
|
||||
@@ -5,7 +5,7 @@ import { EXTERNAL_URL_RE } from 'vitepress/dist/client/shared'
|
||||
|
||||
interface Props {
|
||||
tag?: string
|
||||
size?: 'medium' | 'big' | 'small'
|
||||
size?: 'medium' | 'big'
|
||||
theme?: 'brand' | 'alt' | 'sponsor'
|
||||
text: string
|
||||
href?: string
|
||||
@@ -51,15 +51,6 @@ const component = computed(() => {
|
||||
transition: color 0.1s, border-color 0.1s, background-color 0.1s;
|
||||
}
|
||||
|
||||
.VPButton.small {
|
||||
border-radius: 12px;
|
||||
padding: 0 16px;
|
||||
line-height: 20px;
|
||||
height: 40px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.VPButton.medium {
|
||||
border-radius: 12px;
|
||||
padding: 0 20px;
|
||||
|
||||
@@ -115,7 +115,7 @@ const { hasSidebar } = useSidebar()
|
||||
|
||||
.VPContent.has-sidebar {
|
||||
margin: var(--vp-layout-top-height, 0px) 0 0;
|
||||
padding-left: 320px;
|
||||
padding-left: var(--vp-sidebar-width);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -54,12 +54,10 @@ const pageName = computed(() =>
|
||||
<div class="content-container">
|
||||
<slot name="doc-before" />
|
||||
<main class="main">
|
||||
<div class="vp-doc" :class="[
|
||||
pageName,
|
||||
theme.externalLinkIcon && 'external-link-icon-enabled'
|
||||
]">
|
||||
<Content />
|
||||
</div>
|
||||
<Content class="vp-doc" :class="[
|
||||
pageName,
|
||||
theme.externalLinkIcon && 'external-link-icon-enabled'
|
||||
]" />
|
||||
<SectionLinkList v-if="frontmatter.section_links" :links="frontmatter.section_links" />
|
||||
</main>
|
||||
<VPDocFooter>
|
||||
@@ -76,7 +74,7 @@ const pageName = computed(() =>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/scss/helpers/media';
|
||||
@use 'src/assets/scss/app/helpers/media';
|
||||
|
||||
.VPDoc {
|
||||
padding: 32px 24px 96px;
|
||||
|
||||
@@ -6,8 +6,6 @@ import { usePrevNext } from 'vitepress/dist/client/theme-default/composables/pre
|
||||
import VPIconEdit from 'vitepress/dist/client/theme-default/components/icons/VPIconEdit.vue'
|
||||
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
|
||||
import VPDocFooterLastUpdated from 'vitepress/dist/client/theme-default/components/VPDocFooterLastUpdated.vue'
|
||||
import CustomIcon from './CustomIcon.vue'
|
||||
import { Icons } from '@beeline/design-tokens/js/iconfont/icons'
|
||||
|
||||
const { theme, page, frontmatter } = useData()
|
||||
|
||||
@@ -45,14 +43,14 @@ const showFooter = computed(() => {
|
||||
<nav v-if="control.prev?.link || control.next?.link" class="prev-next">
|
||||
<div class="pager">
|
||||
<VPLink v-if="control.prev?.link" class="pager-link prev" :href="control.prev.link">
|
||||
<CustomIcon class="desc-prev" :icon="Icons.ArrowRight" />
|
||||
<span class="desc" v-html="theme.docFooter?.prev || 'Previous page'"></span>
|
||||
<span class="title" v-html="control.prev.text"></span>
|
||||
</VPLink>
|
||||
</div>
|
||||
<div class="pager">
|
||||
<VPLink v-if="control.next?.link" class="pager-link next" :href="control.next.link">
|
||||
<span class="desc" v-html="theme.docFooter?.next || 'Next page'"></span>
|
||||
<span class="title" v-html="control.next.text"></span>
|
||||
<CustomIcon class="desc-next" :icon="Icons.ArrowRight" />
|
||||
</VPLink>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -61,7 +59,7 @@ const showFooter = computed(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.VPDocFooter {
|
||||
margin-top: 40px;
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.edit-info {
|
||||
@@ -100,6 +98,8 @@ const showFooter = computed(() => {
|
||||
}
|
||||
|
||||
.prev-next {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding-top: 24px;
|
||||
display: grid;
|
||||
grid-row-gap: 8px;
|
||||
}
|
||||
@@ -115,19 +115,10 @@ const showFooter = computed(() => {
|
||||
display: block;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 10px 16px 10px 12px;
|
||||
padding: 11px 16px 13px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: border-color 0.25s;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
color: #1a73e8;
|
||||
|
||||
&.next {
|
||||
padding: 10px 12px 10px 16px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.pager-link:hover {
|
||||
@@ -145,14 +136,6 @@ const showFooter = computed(() => {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
|
||||
&-next {
|
||||
rotate: -270deg;
|
||||
}
|
||||
|
||||
&-prev {
|
||||
rotate: -90deg;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
|
||||
@@ -22,7 +22,8 @@ type ItemFeature = {
|
||||
const style = useCssModule()
|
||||
const classes = computed(() => ({
|
||||
[style.CustomFeature]: true,
|
||||
[style.CustomFeatureDisabled]: disabled || !link && !scrollTo,
|
||||
[style.CustomFeatureDisabled]: disabled || !link,
|
||||
[style.CustomFeatureWithScroll]: scrollTo && !disabled
|
||||
}))
|
||||
|
||||
const handleClick = (event: Event) => {
|
||||
@@ -50,11 +51,7 @@ const handleClick = (event: Event) => {
|
||||
</Component>
|
||||
<div :class="$style.CustomFeatureContainer">
|
||||
<div v-for="(item, i) in items" :key="i">
|
||||
<Component
|
||||
:is="!disabled && item.link ? VPLink : 'article'"
|
||||
v-bind="{ ...(!disabled && item.link && { href: item.link }) }"
|
||||
:class="{ [style.CustomFeatureDisabled]: disabled || !item.link }"
|
||||
>
|
||||
<Component :is="!disabled && item.link ? VPLink : 'article'" v-bind="{ ...(!disabled && item.link && { href: item.link }) }">
|
||||
<p :class="$style.CustomFeatureSubtitle">{{ item.title }}</p>
|
||||
</Component>
|
||||
</div>
|
||||
@@ -97,12 +94,16 @@ const handleClick = (event: Event) => {
|
||||
color: themes.$color-text-active;
|
||||
|
||||
&:hover {
|
||||
color: themes.$color-text-link;
|
||||
color: themes.$color-text-link !important;
|
||||
}
|
||||
|
||||
#{$el}Disabled & {
|
||||
color: themes.$color-text-disabled;
|
||||
}
|
||||
|
||||
#{$el}WithScroll & {
|
||||
color: themes.$color-text-active;
|
||||
}
|
||||
}
|
||||
|
||||
&Subtitle {
|
||||
|
||||
@@ -20,7 +20,6 @@ import {
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
Raw,
|
||||
ref,
|
||||
shallowRef,
|
||||
watch,
|
||||
@@ -33,8 +32,6 @@ import { escapeRegExp } from 'vitepress/dist/client/shared'
|
||||
import { useData } from 'vitepress/dist/client/theme-default/composables/data'
|
||||
import { LRUCache } from 'vitepress/dist/client/theme-default/support/lru'
|
||||
import { createSearchTranslate } from 'vitepress/dist/client/theme-default/support/translation'
|
||||
import CustomIcon from './CustomIcon.vue';
|
||||
import { Icons } from '@beeline/design-tokens/js/iconfont/icons';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
@@ -135,7 +132,6 @@ watchEffect(() => {
|
||||
const results: Ref<(SearchResult & Result)[]> = shallowRef([])
|
||||
|
||||
const enableNoResults = ref(false)
|
||||
const loadig = ref(true)
|
||||
|
||||
watch(filterText, () => {
|
||||
enableNoResults.value = false
|
||||
@@ -164,7 +160,11 @@ debouncedWatch(
|
||||
if (!index) return
|
||||
|
||||
// Search
|
||||
retrySearch(index, filterTextValue)
|
||||
results.value = index
|
||||
.search(filterTextValue)
|
||||
.slice(0, 16) as (SearchResult & Result)[]
|
||||
enableNoResults.value = true
|
||||
|
||||
// Highlighting
|
||||
const mods = showDetailedListValue
|
||||
? await Promise.all(results.value.map((r) => fetchExcerpt(r.id)))
|
||||
@@ -268,16 +268,6 @@ function focusSearchInput(select = true) {
|
||||
select && searchInput.value?.select()
|
||||
}
|
||||
|
||||
const retrySearch = (index: Raw<MiniSearch<Result>>, filter: string) => {
|
||||
if (!index) return
|
||||
|
||||
results.value = index
|
||||
.search(filter)
|
||||
.slice(0, 16) as (SearchResult & Result)[]
|
||||
|
||||
enableNoResults.value = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
focusSearchInput()
|
||||
})
|
||||
@@ -491,6 +481,33 @@ function formMarkRegex(terms: Set<string>) {
|
||||
class="search-input"
|
||||
/>
|
||||
<div class="search-actions">
|
||||
<button
|
||||
v-if="!disableDetailedView"
|
||||
class="toggle-layout-button"
|
||||
type="button"
|
||||
:class="{ 'detailed-list': showDetailedList }"
|
||||
:title="$t('modal.displayDetails')"
|
||||
@click="
|
||||
selectedIndex > -1 && (showDetailedList = !showDetailedList)
|
||||
"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 14h7v7H3zM3 3h7v7H3zm11 1h7m-7 5h7m-7 6h7m-7 5h7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="clear-button"
|
||||
type="reset"
|
||||
@@ -498,13 +515,26 @@ function formMarkRegex(terms: Set<string>) {
|
||||
:title="$t('modal.resetButtonTitle')"
|
||||
@click="resetSearch"
|
||||
>
|
||||
<CustomIcon :icon="Icons.Close" size="large" style="padding: 12px 0;" />
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M20 5H9l-7 7l7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-2 4l-6 6m0-6l6 6"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ul
|
||||
v-if="!!results.length"
|
||||
ref="resultsEl"
|
||||
:id="results?.length ? 'localsearch-list' : undefined"
|
||||
:role="results?.length ? 'listbox' : undefined"
|
||||
@@ -531,21 +561,29 @@ function formMarkRegex(terms: Set<string>) {
|
||||
>
|
||||
<div>
|
||||
<div class="titles">
|
||||
<span class="title-icon">#</span>
|
||||
<span
|
||||
v-for="(t, index) in p.titles"
|
||||
:key="index"
|
||||
class="title"
|
||||
>
|
||||
<span class="text" v-html="t" />
|
||||
<span class="text"> > </span>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m9 18l6-6l-6-6"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="title main">
|
||||
<span class="text" v-html="p.title" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span v-html="p.title" />
|
||||
|
||||
<div v-if="showDetailedList" class="excerpt-wrapper">
|
||||
<div v-if="p.text" class="excerpt" inert>
|
||||
<div class="vp-doc" v-html="p.text" />
|
||||
@@ -556,15 +594,65 @@ function formMarkRegex(terms: Set<string>) {
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
v-if="filterText && !results.length && enableNoResults"
|
||||
class="no-results"
|
||||
>
|
||||
{{ $t('modal.noResultsText') }} "<strong>{{ filterText }}</strong
|
||||
>"
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
v-else-if="filterText && !results.length && enableNoResults"
|
||||
class="no-results"
|
||||
>
|
||||
<p class="no-results-text">
|
||||
{{ $t('modal.noResultsText') }}
|
||||
</p>
|
||||
</ul>
|
||||
|
||||
<div class="search-keyboard-shortcuts">
|
||||
<span>
|
||||
<kbd :aria-label="$t('modal.footer.navigateUpKeyAriaLabel')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 19V5m-7 7l7-7l7 7"
|
||||
/>
|
||||
</svg>
|
||||
</kbd>
|
||||
<kbd :aria-label="$t('modal.footer.navigateDownKeyAriaLabel')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 5v14m7-7l-7 7l-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</kbd>
|
||||
{{ $t('modal.footer.navigateText') }}
|
||||
</span>
|
||||
<span>
|
||||
<kbd :aria-label="$t('modal.footer.selectKeyAriaLabel')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24">
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentcolor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="m9 10l-5 5l5 5" />
|
||||
<path d="M20 4v7a4 4 0 0 1-4 4H4" />
|
||||
</g>
|
||||
</svg>
|
||||
</kbd>
|
||||
{{ $t('modal.footer.selectText') }}
|
||||
</span>
|
||||
<span>
|
||||
<kbd :aria-label="$t('modal.footer.closeKeyAriaLabel')">esc</kbd>
|
||||
{{ $t('modal.footer.closeText') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
@@ -587,12 +675,16 @@ function formMarkRegex(terms: Set<string>) {
|
||||
|
||||
.shell {
|
||||
position: relative;
|
||||
padding: 24px;
|
||||
padding: 12px;
|
||||
margin: 64px auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
background: var(--vp-local-search-bg);
|
||||
width: min(100vw - 60px, 900px);
|
||||
height: min-content;
|
||||
border-radius: 12px;
|
||||
max-height: min(100vh - 128px, 900px);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@@ -606,7 +698,7 @@ function formMarkRegex(terms: Set<string>) {
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
border: 1px solid rgb(32, 33, 35);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -620,6 +712,10 @@ function formMarkRegex(terms: Set<string>) {
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar:focus-within {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
margin: 8px;
|
||||
}
|
||||
@@ -660,7 +756,7 @@ function formMarkRegex(terms: Set<string>) {
|
||||
}
|
||||
|
||||
.search-actions button {
|
||||
padding: 0px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.search-actions button:not([disabled]):hover,
|
||||
@@ -706,31 +802,27 @@ function formMarkRegex(terms: Set<string>) {
|
||||
}
|
||||
|
||||
.results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(25, 28, 52, 0.18);
|
||||
padding: 8px 0;
|
||||
max-height: min(100vh - 214px, 900px);
|
||||
box-shadow: 0px 6px 38px rgba(0, 0, 0, 0.16), 0px 0px 10px rgba(0, 0, 0, 0.08);
|
||||
|
||||
li:hover {
|
||||
background-color: rgba(25, 28, 52, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-radius: 12px;
|
||||
transition: none;
|
||||
line-height: 1rem;
|
||||
border: solid 2px var(--vp-local-search-result-border);
|
||||
outline: none;
|
||||
min-height: 66px;
|
||||
}
|
||||
|
||||
.result > div {
|
||||
margin: 12px 16px;
|
||||
margin: 12px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -748,13 +840,6 @@ function formMarkRegex(terms: Set<string>) {
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
padding: 2px 0;
|
||||
font-size: 13px !important;
|
||||
line-height: 16px !important;
|
||||
}
|
||||
|
||||
:deep(mark) {
|
||||
background-color: transparent;
|
||||
color: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -767,10 +852,21 @@ function formMarkRegex(terms: Set<string>) {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
opacity: 0.5;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.title svg {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.result.selected {
|
||||
--vp-local-search-result-bg: var(--vp-local-search-result-selected-bg);
|
||||
border-color: var(--vp-local-search-result-selected-border);
|
||||
}
|
||||
|
||||
.excerpt-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
@@ -796,7 +892,10 @@ function formMarkRegex(terms: Set<string>) {
|
||||
|
||||
.titles :deep(mark),
|
||||
.excerpt :deep(mark) {
|
||||
background-color: transparent;
|
||||
background-color: var(--vp-local-search-highlight-bg);
|
||||
color: var(--vp-local-search-highlight-text);
|
||||
border-radius: 2px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.excerpt :deep(.vp-code-group) .tabs {
|
||||
@@ -833,44 +932,12 @@ function formMarkRegex(terms: Set<string>) {
|
||||
}
|
||||
|
||||
.no-results {
|
||||
padding: 28px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
box-shadow: 0px 6px 38px rgba(0, 0, 0, 0.16), 0px 0px 10px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(25, 28, 52, 0.18);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.no-results-text {
|
||||
font-weight: 400;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.2px;
|
||||
color: rgba(25, 28, 52, 0.48);
|
||||
}
|
||||
|
||||
.no-results-button {
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(25, 28, 52, 0.18);
|
||||
padding: 13px 20px;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.2px;
|
||||
color: rgba(9, 11, 22, 0.94);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
svg {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 13px !important;
|
||||
line-height: 16px !important;
|
||||
color: rgba(25, 28, 52, 0.48);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,7 +12,6 @@ import VPNavBarSearch from 'vitepress/dist/client/theme-default/components/VPNav
|
||||
import VPNavBarSocialLinks from 'vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue'
|
||||
import CustomNavBarTitle from './CustomNavBarTitle.vue'
|
||||
import VPNavBarTranslations from 'vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue'
|
||||
import CustomButton from './CustomButton.vue'
|
||||
|
||||
defineProps<{
|
||||
isScreenOpen: boolean
|
||||
@@ -28,7 +27,6 @@ const { hasLocalNav } = useLocalNav()
|
||||
const { frontmatter } = useData()
|
||||
|
||||
const classes = ref<Record<string, boolean>>({})
|
||||
const loginUrl = import.meta.env.VITE_LOGIN_URL
|
||||
|
||||
watchPostEffect(() => {
|
||||
classes.value = {
|
||||
@@ -57,9 +55,14 @@ watchPostEffect(() => {
|
||||
<div class="content">
|
||||
<div class="content-body">
|
||||
<slot name="nav-bar-content-before" />
|
||||
<VPNavBarMenu class="menu" />
|
||||
<VPNavBarSearch class="search" />
|
||||
<!-- <CustomButton text="Войти" size="small" :href="loginUrl" /> -->
|
||||
<VPNavBarMenu class="menu" />
|
||||
<VPNavBarTranslations class="translations" />
|
||||
<VPNavBarAppearance class="appearance" />
|
||||
<VPNavBarSocialLinks class="social-links" />
|
||||
<VPNavBarExtra class="extra" />
|
||||
<slot name="nav-bar-content-after" />
|
||||
<VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,7 +109,7 @@ watchPostEffect(() => {
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.wrapper {
|
||||
padding: 0 24px;
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -175,7 +178,7 @@ watchPostEffect(() => {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-right: 32px;
|
||||
padding-left: 0px;
|
||||
padding-left: var(--vp-sidebar-width);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -188,7 +191,7 @@ watchPostEffect(() => {
|
||||
|
||||
.content-body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: var(--vp-nav-height);
|
||||
transition: background-color 0.5s;
|
||||
@@ -222,10 +225,6 @@ watchPostEffect(() => {
|
||||
height: 24px;
|
||||
background-color: var(--vp-c-divider);
|
||||
content: "";
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.menu + .appearance::before,
|
||||
@@ -256,9 +255,4 @@ watchPostEffect(() => {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
justify-content: flex-end;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,16 +3,12 @@ import type { DefaultTheme } from 'vitepress/theme'
|
||||
import { useData } from 'vitepress/dist/client/theme-default/composables/data'
|
||||
import { isActive } from 'vitepress/dist/client/shared'
|
||||
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
defineProps<{
|
||||
item: DefaultTheme.NavItemWithLink
|
||||
}>()
|
||||
|
||||
const { page } = useData()
|
||||
const textRef = ref<HTMLElement | null>(null)
|
||||
|
||||
const wrapperWidth = computed(() => textRef.value?.offsetWidth)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -24,32 +20,22 @@ const wrapperWidth = computed(() => textRef.value?.offsetWidth)
|
||||
page.relativePath,
|
||||
item.activeMatch || item.link,
|
||||
!!item.activeMatch
|
||||
),
|
||||
disabled: !isActive(
|
||||
page.relativePath,
|
||||
item.activeMatch || item.link,
|
||||
!!item.activeMatch
|
||||
) && !item.link ? 'disabled' : '',
|
||||
)
|
||||
}"
|
||||
:href="item.link"
|
||||
:target="item.target"
|
||||
:rel="item.rel"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
ref="textRef"
|
||||
v-html="item.text"
|
||||
/>
|
||||
<span v-html="item.text"></span>
|
||||
</VPLink>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@beeline/design-tokens/scss/tokens/globals/colors';
|
||||
|
||||
<style scoped>
|
||||
.VPNavBarMenuLink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
padding: 0 12px;
|
||||
line-height: var(--vp-nav-height);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
@@ -59,32 +45,9 @@ const wrapperWidth = computed(() => textRef.value?.offsetWidth)
|
||||
|
||||
.VPNavBarMenuLink.active {
|
||||
color: var(--color-text-active);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
height: 4px;
|
||||
display: none;
|
||||
width: calc(v-bind(wrapperWidth) * 1px);
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
background-color: colors.$color-background-brand;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.VPNavBarMenuLink:hover:not(.disabled) {
|
||||
.VPNavBarMenuLink:hover {
|
||||
color: var(--color-text-active);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -14,22 +14,31 @@ const $t = createSearchTranslate(defaultTranslations)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
class="DocSearch-Search-Icon"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
aria-label="search icon"
|
||||
>
|
||||
<path
|
||||
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<button type="button" class="DocSearch DocSearch-Button CustomDocSearch-Button" :aria-label="$t('button.buttonAriaLabel')">
|
||||
<span class="DocSearch-Button-Container">
|
||||
<svg
|
||||
class="DocSearch-Search-Icon"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
aria-label="search icon"
|
||||
>
|
||||
<path
|
||||
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="DocSearch-Button-Placeholder">{{ $t('button.buttonText') }}</span>
|
||||
</span>
|
||||
<span class="DocSearch-Button-Keys">
|
||||
<kbd class="DocSearch-Button-Key"></kbd>
|
||||
<kbd class="DocSearch-Button-Key">K</kbd>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@@ -56,13 +65,156 @@ const $t = createSearchTranslate(defaultTranslations)
|
||||
--docsearch-hit-shadow: none;
|
||||
}
|
||||
|
||||
.DocSearch-Search-Icon {
|
||||
.DocSearch-Button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 48px;
|
||||
height: 55px;
|
||||
background: transparent;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.DocSearch-Button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.DocSearch-Button:focus:not(:focus-visible) {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button {
|
||||
justify-content: flex-start;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 12px;
|
||||
padding: 0 10px 0 12px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
position: relative;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--vp-c-text-1);
|
||||
fill: currentColor;
|
||||
transition: color 0.5s;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover .DocSearch-Search-Icon {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
top: 1px;
|
||||
margin-right: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: none;
|
||||
margin-top: 2px;
|
||||
padding: 0 16px 0 0;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover .DocSearch-Button-Placeholder {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
display: none;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key {
|
||||
display: block;
|
||||
margin: 2px 0 0 0;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
/*rtl:begin:ignore*/
|
||||
border-right: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding-left: 6px;
|
||||
/*rtl:end:ignore*/
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
font-family: var(--vp-font-family-base);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transition: color 0.5s, border-color 0.5s;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
|
||||
/*rtl:begin:ignore*/
|
||||
border-right: 1px solid var(--vp-c-divider);
|
||||
border-left: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding-left: 2px;
|
||||
padding-right: 6px;
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child {
|
||||
font-size: 0 !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child:after {
|
||||
content: 'Ctrl';
|
||||
font-size: 12px;
|
||||
letter-spacing: normal;
|
||||
color: var(--docsearch-muted-color);
|
||||
}
|
||||
|
||||
.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after {
|
||||
content: '\2318';
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child > * {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -38,10 +38,10 @@ const target = computed(() =>
|
||||
:target="target"
|
||||
>
|
||||
<slot name="nav-bar-title-before" />
|
||||
<VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
|
||||
<template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
|
||||
<template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
|
||||
<slot name="nav-bar-title-after" />
|
||||
<VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
@@ -53,13 +53,10 @@ const target = computed(() =>
|
||||
border-bottom: 1px solid transparent;
|
||||
width: 100%;
|
||||
height: var(--vp-nav-height);
|
||||
font-size: 25px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
color: var(--color-text-inactive);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: opacity 0.25s;
|
||||
gap: 20px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@@ -75,6 +72,7 @@ const target = computed(() =>
|
||||
}
|
||||
|
||||
:deep(.logo) {
|
||||
margin-right: 8px;
|
||||
height: var(--vp-nav-logo-height);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -60,8 +60,9 @@ watch(
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: var(--vp-z-index-sidebar);
|
||||
padding: 0px 0px 96px 0px;
|
||||
width: 320px;
|
||||
padding: 32px 32px 96px 32px;
|
||||
width: 256px;
|
||||
max-width: 320px;
|
||||
background-color: var(--vp-sidebar-bg-color);
|
||||
opacity: 0;
|
||||
box-shadow: var(--vp-c-shadow-3);
|
||||
@@ -87,6 +88,8 @@ watch(
|
||||
@media (min-width: 960px) {
|
||||
.VPSidebar {
|
||||
padding-top: var(--vp-nav-height);
|
||||
// width: var(--vp-sidebar-width);
|
||||
// max-width: 100%;
|
||||
background-color: var(--vp-sidebar-bg-color);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
@@ -95,6 +98,13 @@ watch(
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.VPSidebar {
|
||||
// padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
|
||||
// width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.curtain {
|
||||
position: sticky;
|
||||
@@ -111,14 +121,17 @@ watch(
|
||||
|
||||
.nav {
|
||||
outline: 0;
|
||||
padding-top: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.group + .group {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.group {
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
width: calc(var(--vp-sidebar-width) - 64px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,329 +1,11 @@
|
||||
@use "@beeline/design-tokens/scss/tokens/globals/colors";
|
||||
@use "@beeline/design-tokens/scss/tokens/themes";
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as *;
|
||||
|
||||
.custom-block {
|
||||
padding: 24px;
|
||||
|
||||
&-title {
|
||||
font-size: 17px !important;
|
||||
line-height: 22px !important;
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: .2px !important;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
padding: 24px;
|
||||
|
||||
&.tip a {
|
||||
color: #1a73e8;
|
||||
|
||||
&:hover {
|
||||
color: #1a73e8;
|
||||
&-title {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
letter-spacing: .2px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 24px 24px 24px 64px;
|
||||
line-height: 24px;
|
||||
font-size: var(--vp-custom-block-font-size);
|
||||
color: var(--vp-c-text-2);
|
||||
|
||||
&.custom-block.details {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.info {
|
||||
border-color: var(--vp-custom-block-info-border);
|
||||
color: var(--vp-custom-block-info-text);
|
||||
background-color: var(--vp-custom-block-info-bg);
|
||||
}
|
||||
|
||||
.custom-block.info a,
|
||||
.custom-block.info code {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.custom-block.info a:hover,
|
||||
.custom-block.info a:hover > code {
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.custom-block.info code {
|
||||
background-color: var(--vp-custom-block-info-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.note {
|
||||
border-color: var(--vp-custom-block-note-border);
|
||||
color: var(--vp-custom-block-note-text);
|
||||
background-color: var(--vp-custom-block-note-bg);
|
||||
}
|
||||
|
||||
.custom-block.note a,
|
||||
.custom-block.note code {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.custom-block.note a:hover,
|
||||
.custom-block.note a:hover > code {
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.custom-block.note code {
|
||||
background-color: var(--vp-custom-block-note-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.tip {
|
||||
border-color: var(--vp-custom-block-tip-border);
|
||||
color: var(--vp-custom-block-tip-text);
|
||||
background-color: var(--vp-custom-block-tip-bg);
|
||||
|
||||
&::before {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-image: var(--vp-icon-clock);
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.tip a,
|
||||
.custom-block.tip code {
|
||||
color: var(--vp-c-tip-1);
|
||||
}
|
||||
|
||||
.custom-block.tip a:hover,
|
||||
.custom-block.tip a:hover > code {
|
||||
color: var(--vp-c-tip-2);
|
||||
}
|
||||
|
||||
.custom-block.tip code {
|
||||
background-color: var(--vp-custom-block-tip-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.important {
|
||||
border-color: var(--vp-custom-block-important-border);
|
||||
color: var(--vp-custom-block-important-text);
|
||||
background-color: var(--vp-custom-block-important-bg);
|
||||
}
|
||||
|
||||
.custom-block.important a,
|
||||
.custom-block.important code {
|
||||
color: var(--vp-c-important-1);
|
||||
}
|
||||
|
||||
.custom-block.important a:hover,
|
||||
.custom-block.important a:hover > code {
|
||||
color: var(--vp-c-important-2);
|
||||
}
|
||||
|
||||
.custom-block.important code {
|
||||
background-color: var(--vp-custom-block-important-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.warning {
|
||||
border-color: var(--vp-custom-block-warning-border);
|
||||
color: var(--vp-custom-block-warning-text);
|
||||
background-color: var(--vp-custom-block-warning-bg);
|
||||
|
||||
&::before {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-image: var(--vp-icon-info-circled);
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.warning a,
|
||||
.custom-block.warning code {
|
||||
color: $color-text-link;
|
||||
}
|
||||
|
||||
.custom-block.warning a:hover,
|
||||
.custom-block.warning a:hover > code {
|
||||
color: $color-text-link;
|
||||
}
|
||||
|
||||
.custom-block.warning code {
|
||||
background-color: var(--vp-custom-block-warning-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.danger {
|
||||
border-color: var(--vp-custom-block-danger-border);
|
||||
color: var(--vp-custom-block-danger-text);
|
||||
background-color: var(--vp-custom-block-danger-bg);
|
||||
|
||||
&::before {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-image: var(--vp-icon-warning-triangle);
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.danger a,
|
||||
.custom-block.danger code {
|
||||
color: var(--vp-c-danger-1);
|
||||
}
|
||||
|
||||
.custom-block.danger a:hover,
|
||||
.custom-block.danger a:hover > code {
|
||||
color: var(--vp-c-danger-2);
|
||||
}
|
||||
|
||||
.custom-block.danger code {
|
||||
background-color: var(--vp-custom-block-danger-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.caution {
|
||||
border-color: var(--vp-custom-block-caution-border);
|
||||
color: var(--vp-custom-block-caution-text);
|
||||
background-color: var(--vp-custom-block-caution-bg);
|
||||
}
|
||||
|
||||
.custom-block.caution a,
|
||||
.custom-block.caution code {
|
||||
color: var(--vp-c-caution-1);
|
||||
}
|
||||
|
||||
.custom-block.caution a:hover,
|
||||
.custom-block.caution a:hover > code {
|
||||
color: var(--vp-c-caution-2);
|
||||
}
|
||||
|
||||
.custom-block.caution code {
|
||||
background-color: var(--vp-custom-block-caution-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.details {
|
||||
border-color: var(--vp-custom-block-details-border);
|
||||
color: var(--vp-custom-block-details-text);
|
||||
background-color: transparent;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-border;
|
||||
|
||||
pre {
|
||||
border: none !important;
|
||||
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
&:open {
|
||||
&.custom-block.details summary {
|
||||
background-color: $color-background-base-hover;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
|
||||
&::before {
|
||||
background-image: var(--vp-icon-nav-arrow-up);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.details a {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.custom-block.details a:hover,
|
||||
.custom-block.details a:hover > code {
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.custom-block.details code {
|
||||
background-color: var(--vp-custom-block-details-code-bg);
|
||||
}
|
||||
|
||||
.custom-block-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.custom-block p + p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.custom-block.details summary {
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 19px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.2px;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
content: '';
|
||||
background-image: var(--vp-icon-nav-arrow-down);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.details {
|
||||
h1, h2, h3, h4, h5, ul, p {
|
||||
margin: 0 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
padding: 0 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.details summary + p {
|
||||
padding: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.custom-block a {
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.custom-block a:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.custom-block code {
|
||||
font-size: var(--vp-custom-block-code-font-size);
|
||||
}
|
||||
|
||||
.custom-block.custom-block th,
|
||||
.custom-block.custom-block blockquote > p {
|
||||
font-size: var(--vp-custom-block-font-size);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -1,53 +1,10 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
|
||||
@use "@beeline/design-tokens/scss/tokens/globals/colors";
|
||||
|
||||
.VPDocAside {
|
||||
.outline-link {
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.2px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
white-space: unset;
|
||||
color: colors.$color-text-grey-inactive;
|
||||
}
|
||||
|
||||
.outline-link.active {
|
||||
font-weight: 500 !important;
|
||||
color: colors.$color-text-black-active;
|
||||
}
|
||||
|
||||
.outline-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
padding-bottom: 16px;
|
||||
color: colors.$color-text-black-active;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-left: 0px !important;
|
||||
border-left: 0px !important;
|
||||
|
||||
nav {
|
||||
border-left: 1px solid var(--vp-c-divider) !important;
|
||||
|
||||
.outline-link {
|
||||
padding-left: 20px !important;
|
||||
|
||||
&.active {
|
||||
padding-left: 16px !important;
|
||||
position: relative !important;
|
||||
left: -1px !important;
|
||||
border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
|
||||
navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
|
||||
|
||||
border-top-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-topright !important;
|
||||
border-bottom-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-bottomright !important;
|
||||
|
||||
}
|
||||
}
|
||||
.outline-link {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.outline-title {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,566 +1,138 @@
|
||||
@use "@beeline/design-tokens/scss/tokens/globals/colors";
|
||||
@use "@beeline/design-tokens/scss/tokens/themes";
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as *;
|
||||
|
||||
@mixin font_style($fontSize, $fontWeight, $lineHeight, $letterSpacing) {
|
||||
font-size: $fontSize;
|
||||
font-weight: $fontWeight;
|
||||
line-height: $lineHeight;
|
||||
letter-spacing: $letterSpacing;
|
||||
font-size: $fontSize;
|
||||
font-weight: $fontWeight;
|
||||
line-height: $lineHeight;
|
||||
letter-spacing: $letterSpacing;
|
||||
}
|
||||
|
||||
@mixin generate-numbered-list-styles($start, $end) {
|
||||
@for $counter from $start through $end {
|
||||
$counter-name: list + ' ' + ($counter - 1);
|
||||
ol[start*="#{$counter}"] {
|
||||
list-style-type: none;
|
||||
counter-reset: $counter-name;
|
||||
@for $counter from $start through $end {
|
||||
$counter-name: list + ' ' + ($counter - 1);
|
||||
ol[start*="#{$counter}"] {
|
||||
list-style-type: none;
|
||||
counter-reset: $counter-name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vp-doc {
|
||||
font-size: 17px;
|
||||
font-size: 17px;
|
||||
|
||||
// Titles
|
||||
h1 {
|
||||
@include font_style(44px, 500, 56px, 0.3px);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
// Titles
|
||||
h1 {
|
||||
@include font_style(44px, 500, 46px, 0.3px);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include font_style(26px, 500, 32px, 0.2px);
|
||||
margin: 40px 0 24px;
|
||||
}
|
||||
h2 {
|
||||
@include font_style(34px, 400, 36px, 0.3px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font_style(26px, 500, 32px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
h3 {
|
||||
@include font_style(26px, 500, 32px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include font_style(20px, 700, 28px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
h4 {
|
||||
@include font_style(20px, 700, 28px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include font_style(17px, 500, 22px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
h5 {
|
||||
@include font_style(17px, 500, 22px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
// Text
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: list;
|
||||
margin: 0 0 0 50px;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
// Text
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: list;
|
||||
margin: 0 0 0 50px;
|
||||
padding: 0 0 5px 0;
|
||||
font-size: 16px;
|
||||
|
||||
& > * + * {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@include generate-numbered-list-styles(2, 50);
|
||||
|
||||
ol li {
|
||||
position: relative;
|
||||
padding: 8px 0 0 0;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
margin-top: 8px;
|
||||
@include font_style(15px, 400, 18px, 0.2px);
|
||||
}
|
||||
|
||||
ol li:nth-last-of-type(n+2)::after {
|
||||
content: '';
|
||||
border-left: 1px solid rgb(201, 197, 197);
|
||||
position: absolute;
|
||||
line-height: 100%;
|
||||
left: -30px;
|
||||
top: 43px;
|
||||
bottom: -25px;
|
||||
}
|
||||
|
||||
ol li::before {
|
||||
content: counter(list);
|
||||
counter-increment: list;
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -48px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-color: colors.$color-background-brand;
|
||||
color: themes.$color-text-active;
|
||||
@include font_style(15px, 400, 18px, 0.2px);
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul li:nth-last-of-type(n):after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
ol ul li::before {
|
||||
counter-increment: list;
|
||||
content: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol li:last-child {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
ul li:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ol li p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
@include font_style(15px, 400, 18px, 0.2px);
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
color: #1a73e8;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus-visible, &:focus, &:active {
|
||||
color: #1a73e8;
|
||||
& > * + * {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: #7e00ed;
|
||||
@include generate-numbered-list-styles(2, 50);
|
||||
|
||||
ol li {
|
||||
position: relative;
|
||||
padding: 5px 0 0 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.plugin-tabs {
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-border;
|
||||
background-color: revert-layer !important;
|
||||
|
||||
&--tab {
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
&--content {
|
||||
padding: 24px !important;
|
||||
|
||||
.language- {
|
||||
border: none;
|
||||
padding: 0px !important;
|
||||
overflow-y: hidden !important;
|
||||
overflow-x: hidden !important;
|
||||
li + li {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Code
|
||||
.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
|
||||
font-size: var(--vp-code-font-size);
|
||||
color: var(--vp-code-color);
|
||||
}
|
||||
ul li {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
ol li:nth-last-of-type(n+2)::after {
|
||||
content: '';
|
||||
border-left: 1px solid rgb(201, 197, 197);
|
||||
position: absolute;
|
||||
line-height: 100%;
|
||||
left: -30px;
|
||||
top: 43px;
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
.vp-doc :not(pre) > code {
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
background-color: var(--vp-code-bg);
|
||||
transition:
|
||||
color 0.25s,
|
||||
background-color 0.5s;
|
||||
}
|
||||
ol li::before {
|
||||
content: counter(list);
|
||||
counter-increment: list;
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -48px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-color: #7e00ed;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
font-size: 16px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vp-doc a > code {
|
||||
color: var(--vp-code-link-color);
|
||||
}
|
||||
ul li:nth-last-of-type(n):after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.vp-doc a:hover > code {
|
||||
color: var(--vp-code-link-hover-color);
|
||||
}
|
||||
ol ul li::before {
|
||||
counter-increment: list;
|
||||
content: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.vp-doc h1 > code,
|
||||
.vp-doc h2 > code,
|
||||
.vp-doc h3 > code {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
ol li p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.vp-doc div[class*='language-'],
|
||||
.vp-block {
|
||||
position: relative;
|
||||
margin: 16px -24px;
|
||||
background-color: transparent;
|
||||
overflow-x: auto;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
p {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.vp-doc div[class*='language-'],
|
||||
.vp-block {
|
||||
border-radius: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
// Links
|
||||
a {
|
||||
color: #1a73e8;
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.vp-doc li div[class*='language-'] {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
}
|
||||
&:hover, &:focus-visible, &:focus, &:active {
|
||||
color: #1a73e8;
|
||||
}
|
||||
|
||||
.vp-doc div[class*='language-'] + div[class*='language-'],
|
||||
.vp-doc div[class$='-api'] + div[class*='language-'],
|
||||
.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] pre,
|
||||
.vp-doc [class*='language-'] code {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
/*rtl:ignore*/
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] pre {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
overflow-x: auto;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-border;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code {
|
||||
display: block;
|
||||
padding: 0px;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
line-height: var(--vp-code-line-height);
|
||||
font-size: var(--vp-code-font-size);
|
||||
color: var(--vp-code-color);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .highlighted {
|
||||
background-color: var(--vp-code-line-highlight-color);
|
||||
transition: background-color 0.5s;
|
||||
margin: 0 -24px;
|
||||
padding: 0 24px;
|
||||
width: calc(100% + 2 * 24px);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .highlighted.error {
|
||||
background-color: var(--vp-code-line-error-color);
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .highlighted.warning {
|
||||
background-color: var(--vp-code-line-warning-color);
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .diff {
|
||||
transition: background-color 0.5s;
|
||||
margin: 0 -24px;
|
||||
padding: 0 24px;
|
||||
width: calc(100% + 2 * 24px);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .diff::before {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
|
||||
filter: blur(0.095rem);
|
||||
opacity: 0.4;
|
||||
transition:
|
||||
filter 0.35s,
|
||||
opacity 0.35s;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
|
||||
opacity: 0.7;
|
||||
transition:
|
||||
filter 0.35s,
|
||||
opacity 0.35s;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .diff.remove {
|
||||
background-color: var(--vp-code-line-diff-remove-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .diff.remove::before {
|
||||
content: '-';
|
||||
color: var(--vp-code-line-diff-remove-symbol-color);
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .diff.add {
|
||||
background-color: var(--vp-code-line-diff-add-color);
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .diff.add::before {
|
||||
content: '+';
|
||||
color: var(--vp-code-line-diff-add-symbol-color);
|
||||
}
|
||||
|
||||
.vp-doc div[class*='language-'].line-numbers-mode {
|
||||
/*rtl:ignore*/
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.vp-doc .line-numbers-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
/*rtl:ignore*/
|
||||
border-right: 1px solid var(--vp-code-block-divider-color);
|
||||
padding-top: 20px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
line-height: var(--vp-code-line-height);
|
||||
font-size: var(--vp-code-font-size);
|
||||
color: var(--vp-code-line-number-color);
|
||||
transition:
|
||||
border-color 0.5s,
|
||||
color 0.5s;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] > button.copy {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
/*rtl:ignore*/
|
||||
right: 12px;
|
||||
z-index: 3;
|
||||
border: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
background-image: var(--vp-icon-copy);
|
||||
background-position: 50%;
|
||||
background-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
transition:
|
||||
border-color 0.25s,
|
||||
background-color 0.25s,
|
||||
opacity 0.25s;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-']:hover > button.copy,
|
||||
.vp-doc [class*='language-'] > button.copy:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] > button.copy:hover,
|
||||
.vp-doc [class*='language-'] > button.copy.copied {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] > button.copy.copied,
|
||||
.vp-doc [class*='language-'] > button.copy:hover.copied {
|
||||
/*rtl:ignore*/
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] > button.copy.copied::before,
|
||||
.vp-doc [class*='language-'] > button.copy:hover.copied::before {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
/*rtl:ignore*/
|
||||
transform: translateX(calc(-100% - 1px));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
/*rtl:ignore*/
|
||||
border-right: 0;
|
||||
padding: 0 10px;
|
||||
width: fit-content;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-code-copy-code-active-text);
|
||||
white-space: nowrap;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] > span.lang {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
/*rtl:ignore*/
|
||||
right: 8px;
|
||||
z-index: 2;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-code-lang-color);
|
||||
transition:
|
||||
color 0.4s,
|
||||
opacity 0.4s;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-']:hover > button.copy + span.lang,
|
||||
.vp-doc [class*='language-'] > button.copy:focus + span.lang {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Banner
|
||||
.vp-doc .custom-block {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block p {
|
||||
margin: 8px 0;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block p:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block div[class*='language-'] {
|
||||
margin: 8px 0;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block div[class*='language-'] code {
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block .vp-code-group .tabs {
|
||||
margin: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
// Table
|
||||
.vp-doc table {
|
||||
display: block;
|
||||
border-collapse: collapse;
|
||||
overflow-x: auto;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-border;
|
||||
// width: 100%;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.vp-doc tr {
|
||||
border-top: hidden;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
.vp-doc tr:nth-child(2n) {
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.vp-doc th,
|
||||
.vp-doc td {
|
||||
padding: 18px 16px;
|
||||
padding: 18px 16px;
|
||||
width: 100vh;
|
||||
background-color: var(--vp-c-bg);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.vp-doc tbody tr {
|
||||
border-top: 1px solid $color-border;
|
||||
|
||||
&:last-child{
|
||||
border-bottom: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-doc th {
|
||||
@include font_style(15px, 500, 20px, 0.2px);
|
||||
color: $color-text-active;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-top: 1px solid $color-border;
|
||||
}
|
||||
|
||||
.vp-doc td {
|
||||
@include font_style(15px, 400, 18px, 0.2px);
|
||||
padding: 18px 16px;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-right: hidden;
|
||||
border-left: hidden;
|
||||
color: $color-text-active;
|
||||
}
|
||||
|
||||
// Block
|
||||
.vp-doc .custom-block {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block p {
|
||||
margin: 8px 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block p:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block div[class*='language-'] {
|
||||
margin: 40px 0;
|
||||
border-radius: 12px;
|
||||
|
||||
&.vp-doc .custom-block {
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-doc .custom-block div[class*='language-'] code {
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block .vp-code-group .tabs {
|
||||
margin: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
&:visited {
|
||||
color: #7e00ed;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,116 +1,7 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as theme;
|
||||
@use '@/scss/helpers/media';
|
||||
|
||||
.VPSidebar {
|
||||
--vp-sidebar-bg-color: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.VPSidebar .VPSidebarItem .item {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.VPSidebar .VPSidebarItem .link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
border-top-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-topright !important;
|
||||
border-bottom-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-bottomright !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.VPSidebarItem.is-active > .item .link > .text {
|
||||
color: theme.$color-text-active !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
|
||||
.VPSidebarItem {
|
||||
.item {
|
||||
padding: 12px 32px !important;
|
||||
border-top-right-radius: 12px !important;
|
||||
border-bottom-right-radius: 12px !important;
|
||||
color: theme.$color-text-inactive;
|
||||
|
||||
&:hover {
|
||||
background-color: navigationDrawer.$navigation-drawer-item-hover-background-color !important;
|
||||
color: theme.$color-text-inactive;
|
||||
&Item {
|
||||
.text {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active > .item > .indicator {
|
||||
border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
|
||||
navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.VPSidebarItem.collapsible {
|
||||
.items {
|
||||
margin-left: 16px;
|
||||
|
||||
.item {
|
||||
padding: 12px 16px 12px 56px !important;
|
||||
border-top-left-radius: 12px !important;
|
||||
border-bottom-left-radius: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.has-active {
|
||||
> .item {
|
||||
.indicator {
|
||||
display: block !important;
|
||||
border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
|
||||
navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: theme.$color-text-active !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items .VPSidebarItem.is-active > .item {
|
||||
background-color: navigationDrawer.$navigation-drawer-item-hover-background-color !important;
|
||||
|
||||
.text {
|
||||
color: theme.$color-text-active !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.VPSidebarItem.collapsible .items .item .indicator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 0px !important;
|
||||
font-weight: 400 !important;
|
||||
font-size: 15px !important;
|
||||
line-height: 18px !important;
|
||||
letter-spacing: 0.2px !important;
|
||||
|
||||
transition-property: all;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
color: theme.$color-text-inactive !important;
|
||||
}
|
||||
|
||||
.VPSidebarItem .items {
|
||||
border-left: 0px !important;
|
||||
}
|
||||
|
||||
.VPSidebarItem {
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.VPLocalNav.has-sidebar {
|
||||
@include media.max(sm) {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
-5
@@ -1,8 +1,3 @@
|
||||
@use '@beeline/design-tokens/scss/font-face';
|
||||
@use "@beeline/design-tokens/scss/iconfont/iconfont" with (
|
||||
$font-path-iconfont: '../assets/fonts/iconfont'
|
||||
);
|
||||
@use "@beeline/design-tokens/scss/iconfont/icons";
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/dark';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes';
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
@use "@beeline/design-tokens/scss/iconfont/iconfont" with (
|
||||
$font-path-iconfont: '/fonts/iconfont'
|
||||
);
|
||||
@use "@beeline/design-tokens/scss/iconfont/icons";
|
||||
|
||||
$font-path-beeline-sans: '/fonts/beeline-sans' !default;
|
||||
|
||||
@mixin beeline-sans-font($type, $weight, $style: normal) {
|
||||
@font-face {
|
||||
font-family: "Beeline Sans";
|
||||
src:url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.woff2') format('woff2'),
|
||||
url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.woff') format('woff'),
|
||||
url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.ttf') format('truetype');
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin beeline-sans-font-pair($type, $weight) {
|
||||
@include beeline-sans-font($type, $weight);
|
||||
|
||||
}
|
||||
|
||||
@include beeline-sans-font-pair(Regular, 400);
|
||||
|
||||
@include beeline-sans-font-pair(Medium, 500);
|
||||
|
||||
@include beeline-sans-font-pair(Bold, 700);
|
||||
|
||||
@include beeline-sans-font-pair(Black, 900);
|
||||
|
||||
$font-path-roboto-mono: '/fonts/roboto-mono' !default;
|
||||
|
||||
@mixin roboto-mono-font($type, $weight, $style: normal) {
|
||||
@font-face {
|
||||
font-family: "Roboto Mono";
|
||||
src:url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.woff2') format('woff2'),
|
||||
url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.woff') format('woff'),
|
||||
url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.ttf') format('truetype');
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin roboto-mono-font-pair($type, $weight) {
|
||||
@include roboto-mono-font($type, $weight);
|
||||
|
||||
}
|
||||
|
||||
@include roboto-mono-font-pair(Light, 300);
|
||||
|
||||
@include roboto-mono-font-pair(Regular, 400);
|
||||
|
||||
@include roboto-mono-font-pair(Medium, 500);
|
||||
|
||||
@include roboto-mono-font-pair(Bold, 700);
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
@forward "media";
|
||||
@@ -1,3 +1,4 @@
|
||||
@use "design-tokens";
|
||||
@use "fonts";
|
||||
@use "design-system";
|
||||
@use "vars";
|
||||
@use "components";
|
||||
@@ -111,7 +111,7 @@
|
||||
|
||||
:root {
|
||||
--vp-font-family-base: 'Beeline Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--vp-font-family-mono: 'JetBrains Mono', monospace;
|
||||
--vp-font-family-mono: 'Roboto Mono', monospace;
|
||||
|
||||
// Code
|
||||
// --vp-code-font-size: ;
|
||||
@@ -183,18 +183,16 @@
|
||||
--vp-custom-block-code-font-size: 17px;
|
||||
--vp-custom-block-tip-border: transparent;
|
||||
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-tip-bg: #f9f9f9;
|
||||
--vp-custom-block-tip-bg: #f1f1f3;
|
||||
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
|
||||
--vp-custom-block-warning-bg: #e3f2ff;
|
||||
--vp-custom-block-warning-icon: #1a73e8;
|
||||
--vp-custom-block-danger-bg: #fff4e1;
|
||||
--vp-custom-block-danger-icon: #ff9419;
|
||||
--vp-custom-block-warning-bg: #fff4e1;
|
||||
--vp-custom-block-danger-bg: #ffecef;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-custom-block-warning-bg: #132338;
|
||||
--vp-custom-block-warning-bg: #3d392a;
|
||||
--vp-custom-block-tip-bg: #36383c;
|
||||
--vp-custom-block-danger-bg: #3d392a;
|
||||
--vp-custom-block-danger-bg: #371313;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -205,12 +203,3 @@
|
||||
--docsearch-primary-color: var(--vp-c-brand-1) !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
--vp-icon-copy: url('../../../public/icons/copy.svg');
|
||||
--vp-icon-clock: url('../../../public/icons/clock.svg');
|
||||
--vp-icon-info-circled: url('../../../public/icons/info_circled.svg');
|
||||
--vp-icon-warning-triangle: url('../../../public/icons/warning_triangle.svg');
|
||||
--vp-icon-nav-arrow-down: url('../../../public/icons/nav_arrow_down.svg');
|
||||
--vp-icon-nav-arrow-up: url('../../../public/icons/nav_arrow_up.svg');
|
||||
--vp-sidebar-width: 320px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
section_links:
|
||||
- title: Управление ключевыми парами
|
||||
link: /admin/ssh.md
|
||||
description: Добавление SSH-ключей для подключения к виртуальным машинам
|
||||
---
|
||||
|
||||
# Аккаунт Beeline Cloud
|
||||
|
||||
Аккаунт Beeline Cloud создается при [регистрации пользователя](../start/getting-started.md#1-регистрация-в-beeline-cloud) в Beeline Cloud. С помощью аккаунта можно управлять профилем пользователя.
|
||||
@@ -0,0 +1,13 @@
|
||||
# Матрица региональной доступности
|
||||
|
||||
Регион доступности — это один или несколько центров обработки данных (ЦОД), в которых могут быть размещены компоненты облачной инфраструктуры.
|
||||
|
||||
| Регион | Статус | Гипервизор | Процессор | HDD| SSD | NVME|
|
||||
|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| **ДатаФорт 1** | Доступен | OpenStack | Intel® Xeon® Gold 6248R | ✘ | ✘ | ✅ |
|
||||
|
||||
Условные обозначения:
|
||||
|
||||
✅ — есть возможность выдачи ресурсов.
|
||||
|
||||
✘ — нет возможности выдачи ресурсов.
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
section_links:
|
||||
- title: Управление ключевыми парами
|
||||
link: /admin/ssh.md
|
||||
description: Добавление SSH-ключей для подключения к виртуальным машинам
|
||||
---
|
||||
|
||||
# Администрирование
|
||||
|
||||
При [регистрации пользователя](../start/getting-started.md#1-регистрация-в-beeline-cloud) в Beeline Cloud создается аккаунт и проект в Beeline Cloud.
|
||||
|
||||
С помощью аккаунта можно управлять профилем пользователя - добавлять SSH-ключи, чтобы подключаться к виртуальным машинам без ввода пароля.
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
# Квоты и лимиты
|
||||
|
||||
Ограничения включают в себя лимиты и квоты на потребление ресурсов в проекте.
|
||||
|
||||
Квоты ограничивают потребление ресурсов в проекте. В проекте на каждый ресурс выделяется квота, не превышающая лимит.
|
||||
|
||||
После создания проекту становятся доступны базовые квоты. Для них установлены значения по умолчанию.
|
||||
|
||||
**Базовые квоты**
|
||||
|
||||
| Название квоты | Количество |
|
||||
|---------------------|------------|
|
||||
| Количество виртуальных ВМов | 3 штуки|
|
||||
| ЦПУ | 200 |
|
||||
| ОЗУ | 200 Гбайт |
|
||||
| Хранилище NVME | 5000 Гбайт |
|
||||
| Объектное хранилище | 100 Гбайт |
|
||||
|
||||
## Просмотр квот проекта
|
||||
|
||||
1. Перейдите в консоль управления.
|
||||
2. В шапке выберите **Проекты**.
|
||||
3. Откроется список проектов, в которых вы являетесь участником.
|
||||
4. Нажмите на имя нужного проекта.
|
||||
5. Откройте раздел **Обзор**.
|
||||
|
||||
## Редактирование квот проекта
|
||||
|
||||
::: tip Информация
|
||||
Изменить квоты проекта может пользователь с ролью **Владелец проекта**.
|
||||
:::
|
||||
|
||||
1. Перейдите в консоль управления.
|
||||
2. В шапке выберите **Проекты**.
|
||||
3. Откроется список проектов, в которых вы являетесь участником.
|
||||
4. Нажмите на имя нужного проекта.
|
||||
5. Откройте раздел **Обзор**.
|
||||
6. В правом верхнем углу нажмите **Изменить квоты**.
|
||||
7. Увеличите или уменьшите квоты для ресурсов.
|
||||
8. Нажмите **Сохранить**.
|
||||
@@ -0,0 +1,49 @@
|
||||
# Управление проектами
|
||||
|
||||
Проект — это структурная единица публичного облака, в которой содержатся ресурсы: виртуальные машины, хранилища, IP-адреса и др.
|
||||
|
||||
Ресурсы могут быть вычислительными и аппаратными.
|
||||
|
||||
Вычислительные ресурсы:
|
||||
- оперативная память (ОЗУ);
|
||||
- ядра процессора (ЦПУ);
|
||||
- локальные диски;
|
||||
- сетевые диски;
|
||||
- IP-адреса.
|
||||
|
||||
Аппаратные ресурсы (ВМы, сети, диски) размещены в центрах обработки данных (ЦОД). Каждый дата-центр разделен на модули. Модули оснащены независимыми системами электропитания и охлаждения.
|
||||
|
||||
При получении доступа в публичное облако текущий пользователь становится менеджера проектов. Менеджер проектов может создавать новые проекты, в которых он получает роль владельца проекта. Владелец проекта может добавлять пользователей в проект, назначая им роли.
|
||||
|
||||
Доступ к проекту осуществляется из консоли управления.
|
||||
|
||||
## Создать проект
|
||||
|
||||
1. Перейдите в консоль управления.
|
||||
2. Нажмите кнопку **Создать → Проект** в правом верхнем углу.
|
||||
3. Заполните информацию о проекте:
|
||||
- **Название**: введите наименование проекта.
|
||||
- **Идентификатор**: введите идентификатор проекта:
|
||||
- допустимы строчные и прописные буквы латинского алфавита, цифры и дефис;
|
||||
- длина не более 64 символов;
|
||||
- не должно начинаться или заканчиваться дефисом.
|
||||
- **Описание**: введите краткое описание проекта.
|
||||
4. Нажмите **Создать**.
|
||||
|
||||
## Изменить имя проекта
|
||||
|
||||
::: tip Информация
|
||||
Изменить имя и описание проекта может только пользователь с ролью **Владелец проекта**.
|
||||
:::
|
||||
|
||||
1. Перейдите в консоль управления.
|
||||
2. В шапке выберите **Проекты**.
|
||||
3. Откроется список проектов, в которых вы являетесь участником.
|
||||
4. Нажмите на имя нужного проекта.
|
||||
5. Откройте раздел **Настройки → Основное**.
|
||||
6. Измените имя, описание проекта.
|
||||
7. Нажмите **Сохранить**.
|
||||
|
||||
## Удаление проекта
|
||||
|
||||
Функциональность не предусмотрена в публичном облаке.
|
||||
@@ -0,0 +1,49 @@
|
||||
# Ролевая модель
|
||||
|
||||
Управление проектом основано на ролевой модели.
|
||||
|
||||
**Базовые роли**
|
||||
|
||||
В проекте предусмотрен базовый набор ролей:
|
||||
|
||||
- **Владелец продукта** — управление пользователями проекта, просмотр ресурсов.
|
||||
- **DevOps-инженер** — управление инфраструктурой, стандартное администрирование ОС UNIX по протоколу ssh и права управления виртуальными ВМами и дисками в консоли управления.
|
||||
|
||||
## Матрица ролей
|
||||
|
||||
| Действие | Владелец проекта | DevOps-инженер |
|
||||
|---|---|---|
|
||||
| Обзор проекта<br> (квоты и количество использованных ресурсов)| ✅ | ✅ |
|
||||
| ВМы: обзор | ✅ | ✅ |
|
||||
| ВМы: мониторинг | ✅ | ✅ |
|
||||
| ВМы: создать ВМ |✘ | ✅ |
|
||||
| ВМы: подключить диск | ✘ | ✅ |
|
||||
| ВМы: отключить диск | ✘ | ✅ |
|
||||
| ВМы: добавить диск | ✘ | ✅ |
|
||||
| ВМы: теги | ✘ |✅ |
|
||||
| ВМы: масштабирование ВМа | ✘ | ✅ |
|
||||
| ВМы: выключить ВМ | ✘ | ✅ |
|
||||
| ВМы: включить ВМ | ✘ | ✅ |
|
||||
| ВМы: перезагрузить ВМ | ✘ | ✅ |
|
||||
| ВМы: принудительно перезагрузить ВМ | ✘ | ✅ |
|
||||
| ВМы: удалить ВМ | ✘ | ✅ |
|
||||
| ВМы: группы размещения | ✘ | ✅ |
|
||||
| ВМы: IP-адреса | ✘ | ✅ |
|
||||
| Диски: просмотр дисков | ✅ | ✅ |
|
||||
| Диски: добавление дискового пространства | ✘ | ✅ |
|
||||
| Диски: удалить диск| ✘ | ✅ |
|
||||
| Объектное хранилище: просмотр| ✅ | ✅ |
|
||||
| Объектное хранилище: добавить хранилище | ✘ | ✅ |
|
||||
| Объектное хранилище: удалить хранилище | ✘ | ✅|
|
||||
| DNS: добавить зону | ✘ | ✅ |
|
||||
| DNS: редактировать зону | ✘ | ✅ |
|
||||
| DNS: удалить зону |✘ | ✅ |
|
||||
| Настройки проекта: просмотр| ✅ | ✅ |
|
||||
| Настройки проекта: изменить описание проекта |✅ | ✘ |
|
||||
| Участники: просмотр | ✅ | ✅ |
|
||||
| Участники: добавить участника | ✅ | ✘ |
|
||||
| Участники: удалить участника | ✅ | ✘ |
|
||||
| Участники: назначить роль | ✅| ✘ |
|
||||
| Квоты: просмотр | ✅ | ✅ |
|
||||
| Веб-обработчики | ✘ | ✅ |
|
||||
| Наблюдаемость | ✅ | ✅ |
|
||||
+4
-4
@@ -10,7 +10,7 @@ SSH-ключ добавляется на этапе [создания вирту
|
||||
|
||||
## Добавить SSH-ключ
|
||||
|
||||
1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
|
||||
1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
|
||||
2. Перейдите в профиль пользователя в правом верхнем углу.
|
||||
3. Перейдите в раздел **SSH-ключи**.
|
||||
4. Нажмите **Добавить ключ**.
|
||||
@@ -31,14 +31,14 @@ SSH-ключ добавляется на этапе [создания вирту
|
||||
|
||||
## Посмотреть SSH-ключи
|
||||
|
||||
1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
|
||||
1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
|
||||
2. Перейдите в профиль пользователя в правом верхнем углу.
|
||||
3. Перейдите в раздел **SSH-ключи**.
|
||||
4. В таблице показаны SSH-ключи пользователя.
|
||||
|
||||
## Изменить название SSH-ключа
|
||||
|
||||
1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
|
||||
1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
|
||||
2. Перейдите в профиль пользователя в правом верхнем углу.
|
||||
3. Перейдите в раздел **SSH-ключи**.
|
||||
4. Выберите нужный ключ.
|
||||
@@ -48,7 +48,7 @@ SSH-ключ добавляется на этапе [создания вирту
|
||||
|
||||
## Удалить SSH-ключ
|
||||
|
||||
1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
|
||||
1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
|
||||
2. Перейдите в профиль пользователя в правом верхнем углу.
|
||||
3. Перейдите в раздел **SSH-ключи**.
|
||||
4. Выберите нужный ключ.
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
# Управление пользователями в проекте
|
||||
|
||||
В консоли управления можно добавлять пользователей, управлять ролями пользователей в проекте. Один пользователей может участвовать в нескольких проектах и иметь в них разные роли.
|
||||
|
||||
::: tip Информация
|
||||
Добавлять и удалять пользователей, изменять права пользователей в проекте может только владелец проекта.
|
||||
:::
|
||||
|
||||
## Добавить пользователя
|
||||
|
||||
1. Перейдите в консоль управления.
|
||||
2. Откройте **Настройки → Участники**.
|
||||
3. Нажмите **Добавить пользователя**.
|
||||
4. Найдите пользователя по ФИО или email.
|
||||
5. Назначьте [роль](../admin/roles.md) пользователю.
|
||||
6. Нажмите **Добавить**.
|
||||
|
||||
## Назначить права пользователю
|
||||
|
||||
Каждому пользователю проекта должна быть выдана хотя бы одна роль. У пользователя может быть несколько ролей в одном проекте.
|
||||
|
||||
1. Перейдите в консоль управления.
|
||||
2. Откройте **Настройки → Участники**.
|
||||
3. Найдите пользователя.
|
||||
4. Нажмите ⠇ в строке с именем пользователя и выберите **Редактировать**.
|
||||
5. Назначьте [роль](../admin/roles.md) пользователю: установите флажок напротив роли.
|
||||
6. Нажмите **Сохранить**.
|
||||
|
||||
Права на существующие ОС применятся в течение 10 минут.
|
||||
|
||||
## Отозвать права у пользователя
|
||||
|
||||
1. Перейдите в консоль управления.
|
||||
2. Откройте **Настройки → Участники**.
|
||||
3. Найдите пользователя.
|
||||
4. Нажмите ⠇ в строке с именем пользователя и выберите **Редактировать**.
|
||||
5. Отзовите роль у пользователя: уберите флажок напротив роли. Оставьте пользователю хотя бы одну роль в проекте.
|
||||
6. Нажмите кнопку **Сохранить**.
|
||||
|
||||
## Удалить пользователя
|
||||
|
||||
1. Перейдите в консоль управления.
|
||||
2. Откройте **Настройки → Участники**.
|
||||
3. Найдите пользователя.
|
||||
4. Нажмите ⠇ в строке с именем пользователя и выберите **Удалить**.
|
||||
|
||||
Пользователь будет удален из списка участников проекта. Ресурсы проекта станут недоступны пользователю.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 347 KiB After Width: | Height: | Size: 347 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 325 KiB After Width: | Height: | Size: 325 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 199 KiB After Width: | Height: | Size: 199 KiB |
@@ -0,0 +1,38 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as *;
|
||||
|
||||
:root {
|
||||
--app-navbar-height: #{$app-navbar-height};
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
html.dark-theme {
|
||||
background-color: $color-background-base;
|
||||
color: $color-text-active;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: $color-text-active !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import 'variables';
|
||||
@import 'base';
|
||||
@import 'form';
|
||||
@import 'helpers';
|
||||
@import 'components';
|
||||
@@ -0,0 +1,3 @@
|
||||
// Navbar
|
||||
$app-navbar-height: 3.5rem;
|
||||
$app-header-height: 64px;
|
||||
@@ -0,0 +1,122 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as *;
|
||||
@use '@beeline/design-tokens/scss/tokens/components/fab' as *;
|
||||
@use '@beeline/design-tokens/scss/tokens/components/button' as *;
|
||||
@use '@beeline/design-tokens/scss/tokens/globals' as *;
|
||||
@use '@beeline/design-tokens/scss/mixin';
|
||||
|
||||
@mixin fab_button {
|
||||
background-color: $button-overlay-background-color;
|
||||
padding-left: $button-only-text-small-padding-horizontal;
|
||||
padding-right: $button-only-text-small-padding-horizontal;
|
||||
letter-spacing: $button-small-text-font-letter-spacing;
|
||||
line-height: $button-small-text-font-line-height;
|
||||
font-size: $button-small-text-font-size;
|
||||
height: $button-small-height;
|
||||
color: $button-overlay-text-color;
|
||||
box-shadow: none;
|
||||
border: 1px solid $button-outline-border-color;
|
||||
border-radius: $button-border-radius;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $button-overlay-background-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.app-fab {
|
||||
height: $fab-standard-height;
|
||||
width: $fab-standard-width;
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
padding: $fab-standard-padding;
|
||||
letter-spacing: $fab-text-font-letter-spacing;
|
||||
line-height: $fab-text-font-line-height;
|
||||
font-size: $fab-text-font-size;
|
||||
font-weight: $fab-text-font-weight;
|
||||
box-shadow: $fab-shadow;
|
||||
background-color: $color-background-inverse;
|
||||
color: $color-text-active-inverse;
|
||||
cursor: pointer;
|
||||
|
||||
&__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
// background-color: $fab-hover-background-color;
|
||||
}
|
||||
|
||||
&--focused {
|
||||
border-color: $fab-focused-border-color;
|
||||
border-width: $fab-focused-border-width;
|
||||
}
|
||||
|
||||
&--mini {
|
||||
height: $fab-mini-height;
|
||||
width: $fab-mini-width;
|
||||
border-radius: $fab-mini-border-radius;
|
||||
padding: $fab-mini-padding;
|
||||
}
|
||||
|
||||
&--extended {
|
||||
height: $fab-extended-height;
|
||||
border-radius: $fab-extended-border-radius;
|
||||
padding-right: $fab-extended-padding-right;
|
||||
padding-left: $fab-extended-padding-left;
|
||||
|
||||
& &__icon {
|
||||
margin-right: $fab-extended-icon-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.app-fab--extended.app-fab--mini {
|
||||
height: $fab-mini-height;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: $fab-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.app-fab-dialog {
|
||||
position: fixed;
|
||||
bottom: 44px;
|
||||
right: 0;
|
||||
// background-color: $color-background-medium;
|
||||
background-color: transparent;
|
||||
// border-radius: 12px;
|
||||
padding: 1rem;
|
||||
// border: 1px solid $color-border;
|
||||
// min-width: 300px;
|
||||
// box-shadow: $elevation-medium;
|
||||
|
||||
.icon-contained {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: $color-status-neutral-background;
|
||||
color: $color-status-neutral;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#feedback_button {
|
||||
@include fab_button();
|
||||
}
|
||||
|
||||
#bug_button {
|
||||
@include fab_button();
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
a#bug_button,
|
||||
a#bug_button:visited,
|
||||
a#bug_button:active {
|
||||
color: $button-overlay-text-color !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import 'fab';
|
||||
@@ -0,0 +1 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/formfield' as formfield;
|
||||
@@ -0,0 +1,104 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/textarea' as *;
|
||||
@use '@beeline/design-tokens/scss/tokens/components/formfield';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes';
|
||||
|
||||
.textarea-field {
|
||||
$px: 16px;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: $textarea-without-label-medium-text-margin-top $px $textarea-text-margin-bottom;
|
||||
height: $textarea-without-label-medium-height;
|
||||
background: formfield.$formfield-background-color;
|
||||
border: formfield.$formfield-border-width formfield.$formfield-border-style formfield.$formfield-border-color;
|
||||
border-radius: formfield.$formfield-border-radius;
|
||||
|
||||
& &__label {
|
||||
position: absolute;
|
||||
top: $textarea-with-label-text-margin-top;
|
||||
left: $px;
|
||||
transition: font-size 300ms ease-out;
|
||||
color: formfield.$formfield-label-color;
|
||||
}
|
||||
|
||||
& textarea {
|
||||
height: $textarea-medium-text-height;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
resize: none;
|
||||
background-color: transparent;
|
||||
color: themes.$color-text-active;
|
||||
}
|
||||
|
||||
& &__resizer {
|
||||
position: absolute;
|
||||
bottom: $textarea-resizer-margin-bottom;
|
||||
right: $textarea-resizer-margin-right;
|
||||
rotate: -45deg;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
&:hover {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: flex;
|
||||
background-color: darkslategrey;
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: flex;
|
||||
position: relative;
|
||||
right: -3px;
|
||||
bottom: -2px;
|
||||
background-color: darkslategrey;
|
||||
width: 4px;
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.textarea-field--with-label {
|
||||
height: $textarea-with-label-medium-height;
|
||||
padding-top: $textarea-with-label-text-margin-top;
|
||||
|
||||
&.textarea-field--floated .textarea-field__label {
|
||||
top: $textarea-medium-label-floated-margin-top;
|
||||
line-height: $textarea-small-label-floated-font-line-height;
|
||||
font-size: $textarea-small-label-floated-font-size;
|
||||
}
|
||||
|
||||
&.textarea-field--small {
|
||||
height: $textarea-with-label-small-height;
|
||||
padding-top: $textarea-small-label-margin-top;
|
||||
top: $textarea-small-label-floated-margin-top;
|
||||
|
||||
& .textarea-field__label {
|
||||
font-size: $textarea-small-label-font-size;
|
||||
font-weight: $textarea-small-label-font-weight;
|
||||
letter-spacing: $textarea-small-label-font-letter-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.textarea-field--focused {
|
||||
border-color: formfield.$formfield-border-color-focus;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.textarea-field--small {
|
||||
padding-top: $textarea-without-label-small-text-margin-top;
|
||||
height: $textarea-without-label-small-height;
|
||||
|
||||
& textarea {
|
||||
height: $textarea-small-text-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/textfield' as *;
|
||||
@use '@beeline/design-tokens/scss/tokens/globals';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as theme;
|
||||
|
||||
.textfield {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: globals.$size-control-height-medium;
|
||||
border: globals.$size-border-width-regular solid transparent;
|
||||
padding-top: $textfield-without-label-medium-text-margin-vertical;
|
||||
padding-bottom: $textfield-without-label-medium-text-margin-vertical;
|
||||
background-color: theme.$color-control-background;
|
||||
border-radius: 12px; // globals.$size-border-radius-x6;
|
||||
|
||||
&:hover {
|
||||
background-color: theme.$color-control-background-hover;
|
||||
}
|
||||
|
||||
// input
|
||||
input {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// label
|
||||
&--with-label {
|
||||
// padding-top: $textfield-with-label-medium-text-margin-top;
|
||||
// padding-bottom: $textfield-with-label-medium-text-margin-bottom;
|
||||
}
|
||||
|
||||
&__label {
|
||||
// padding-top: $textfield-medium-label-margin-top;
|
||||
|
||||
&.textfield__label--floated {
|
||||
// padding-top: $textfield-medium-label-margin-top-floated;
|
||||
}
|
||||
}
|
||||
|
||||
// small
|
||||
&--small {
|
||||
height: globals.$size-control-height-small;
|
||||
}
|
||||
|
||||
// large
|
||||
&--large {
|
||||
height: globals.$size-control-height-large;
|
||||
padding-top: $textfield-without-label-large-text-margin-vertical;
|
||||
padding-bottom: $textfield-without-label-large-text-margin-vertical;
|
||||
|
||||
&.textfield--with-label {
|
||||
padding-top: $textfield-with-label-large-text-margin-top;
|
||||
padding-bottom: $textfield-with-label-large-text-margin-bottom;
|
||||
}
|
||||
|
||||
.textfield__label {
|
||||
padding-top: $textfield-large-label-margin-top;
|
||||
|
||||
&.textfield__label--floated {
|
||||
padding-top: $textfield-large-label-margin-top-floated;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// states
|
||||
&--focused {
|
||||
border-color: theme.$color-border-focus;
|
||||
background-color: theme.$color-background-base;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as *;
|
||||
|
||||
.app-bg-status-error {
|
||||
background-color: $color-status-error-background;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.app-cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import 'text';
|
||||
@import 'color';
|
||||
@import 'media';
|
||||
@import 'common';
|
||||
+1
-3
@@ -1,5 +1,3 @@
|
||||
@use "sass:map";
|
||||
|
||||
// @deprecated
|
||||
@mixin media($minWidth, $maxWidth) {
|
||||
@media (min-width: $minWidth) and (max-width: $maxWidth) {
|
||||
@@ -29,7 +27,7 @@ $breakpoints: (
|
||||
);
|
||||
|
||||
@mixin max($breakpoint) {
|
||||
$value: map.get($breakpoints, $breakpoint);
|
||||
$value: map-get($breakpoints, $breakpoint);
|
||||
|
||||
@if $value {
|
||||
@media (max-width: $value) {
|
||||
@@ -0,0 +1,80 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as theme;
|
||||
@use 'src/assets/scss/app/mixins' as mixins;
|
||||
|
||||
@mixin truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@mixin truncate-lines($lines: 2) {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $lines;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.app-text-active {
|
||||
color: theme.$color-text-active;
|
||||
}
|
||||
|
||||
.app-text-inactive {
|
||||
color: theme.$color-text-inactive;
|
||||
}
|
||||
|
||||
// styles for hyperlinks
|
||||
.app-link {
|
||||
color: theme.$color-text-active;
|
||||
|
||||
&:hover {
|
||||
color: theme.$color-text-active;
|
||||
}
|
||||
}
|
||||
|
||||
.app-text-caption {
|
||||
@include mixins.text-caption;
|
||||
}
|
||||
|
||||
.app-text-truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.app-text-size-subtitle-3 {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.app-text-size-body-3 {
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.2px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Colors
|
||||
.app-text-color-caption {
|
||||
color: theme.$color-text-inactive;
|
||||
}
|
||||
.app-text-warning {
|
||||
color: theme.$color-status-warning;
|
||||
}
|
||||
.app-text-info {
|
||||
color: theme.$color-status-info;
|
||||
}
|
||||
.app-text-error {
|
||||
color: theme.$color-status-error;
|
||||
}
|
||||
.app-text-success {
|
||||
color: theme.$color-status-success;
|
||||
}
|
||||
|
||||
// Breaks
|
||||
.app-break-keep-all {
|
||||
word-break: keep-all;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import 'spinner';
|
||||
@@ -0,0 +1,6 @@
|
||||
@use 'src/assets/scss/app/variables' as v;
|
||||
|
||||
.app-loading-screen {
|
||||
display: block;
|
||||
height: calc(100vh - v.$app-header-height);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@forward 'text';
|
||||
@@ -0,0 +1,29 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as theme;
|
||||
|
||||
%text_caption {
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@mixin text_caption {
|
||||
@extend %text_caption;
|
||||
color: theme.$color-text-inactive;
|
||||
}
|
||||
|
||||
@mixin text_caption_error {
|
||||
@extend %text_caption;
|
||||
color: theme.$color-status-error;
|
||||
}
|
||||
|
||||
@mixin text_body_2 {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
@mixin truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/dark';
|
||||
|
||||
:root {
|
||||
@include themes.theme();
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
@include themes.theme(dark.$theme);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@use '@beeline/design-tokens/scss/font-face' with (
|
||||
$font-path-beeline-sans: '../fonts/beeline-sans'
|
||||
);
|
||||
@@ -0,0 +1,40 @@
|
||||
// @use "@beeline/design-tokens/scss/iconfont/iconfont" with (
|
||||
// $font-path-iconfont: '../fonts/iconfont'
|
||||
// );
|
||||
@use '@beeline/design-tokens/scss/iconfont/icons';
|
||||
|
||||
@font-face {
|
||||
font-display: block;
|
||||
font-family: 'BeelineIcons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
url('../fonts/iconfont/BeelineIcons.woff2') format('woff2'),
|
||||
url('../fonts/iconfont/BeelineIcons.woff') format('woff'),
|
||||
url('../fonts/iconfont/BeelineIcons.ttf') format('ttf');
|
||||
}
|
||||
|
||||
.beeline-icons {
|
||||
font-family: 'BeelineIcons', sans-serif;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import 'fonts';
|
||||
@import 'icons';
|
||||
@import 'base';
|
||||
@import 'scrollbar';
|
||||
@@ -0,0 +1,29 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes';
|
||||
|
||||
html {
|
||||
scrollbar-color: themes.$color-text-inactive transparent;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: themes.$color-text-inactive;
|
||||
border: 4px solid transparent;
|
||||
background-clip: content-box;
|
||||
border-radius: 100px;
|
||||
min-height: 28px;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
@use 'sass:map';
|
||||
@use '@beeline/design-tokens/scss/tokens/globals';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/light';
|
||||
@use '@beeline/design-tokens/scss/tokens/components/button';
|
||||
|
||||
// Colors
|
||||
$primary: globals.$color-background-brand;
|
||||
$background: map.get(light.$theme, 'color-background-base');
|
||||
$info: map.get(light.$theme, 'color-status-info');
|
||||
$success: map.get(light.$theme, 'color-status-success');
|
||||
$warning: map.get(light.$theme, 'color-status-warning');
|
||||
$danger: map.get(light.$theme, 'color-status-error');
|
||||
|
||||
// Typography
|
||||
$family-primary: globals.$font-family-text;
|
||||
$title-color: map.get(light.$theme, 'color-text-active');
|
||||
$subtitle-color: map.get(light.$theme, 'color-text-inactive');
|
||||
|
||||
// Radius
|
||||
$radius: globals.$size-border-radius-x6;
|
||||
|
||||
// Buttons
|
||||
$button-padding-vertical: globals.$size-spacing-x4;
|
||||
$button-padding-horizontal: globals.$size-spacing-x5;
|
||||
$button-background-color: button.$button-plain-background-color;
|
||||
$button-focus-border-color: map.get(light.$theme, 'color-background-base-focused');
|
||||
$button-disabled-opacity: button.$button-opacity-disabled;
|
||||
|
||||
// Box
|
||||
$box-radius: $radius;
|
||||
$box-shadow: globals.$elevation-low;
|
||||
$box-padding: globals.$size-spacing-x6;
|
||||
$box-link-hover-shadow: globals.$elevation-medium;
|
||||
$box-link-active-shadow: globals.$elevation-medium;
|
||||
|
||||
// Form
|
||||
$input-color: map.get(light.$theme, 'color-text-active');
|
||||
$input-background-color: map.get(light.$theme, 'color-control-background');
|
||||
$label-color: map.get(light.$theme, 'color-text-inactive');
|
||||
$label-weight: globals.$font-weight-caption;
|
||||
|
||||
// Table
|
||||
$table-color: map.get(light.$theme, 'color-text-active');
|
||||
$table-background-color: map.get(light.$theme, 'color-background-base');
|
||||
$table-cell-border: 1px solid map.get(light.$theme, 'color-control-background');
|
||||
$table-cell-padding: 16px 16px;
|
||||
$table-cell-heading-color: map.get(light.$theme, 'color-text-active');
|
||||
$table-head-cell-border-width: 1px;
|
||||
|
||||
@import 'bulma/bulma';
|
||||
@import 'overrides';
|
||||
@@ -0,0 +1,12 @@
|
||||
@use 'sass:map';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/dark';
|
||||
|
||||
.box {
|
||||
.dark-theme & {
|
||||
background-color: map.get(dark.$theme, 'color-background-low');
|
||||
|
||||
&:hover {
|
||||
background-color: map.get(dark.$theme, 'color-background-medium');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/button' as button;
|
||||
@use '@beeline/design-tokens/scss/tokens/themes';
|
||||
|
||||
.button {
|
||||
font-weight: button.$button-medium-text-font-weight;
|
||||
color: themes.$color-text-active;
|
||||
|
||||
&:hover {
|
||||
color: themes.$color-text-active;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes';
|
||||
|
||||
.dropdown {
|
||||
&-content {
|
||||
background-color: themes.$color-background-medium;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: themes.$color-text-active;
|
||||
|
||||
&:hover {
|
||||
background-color: themes.$color-background-base-hover;
|
||||
color: themes.$color-text-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@import 'button';
|
||||
@import 'title';
|
||||
@import 'box';
|
||||
@import 'form';
|
||||
@import 'table';
|
||||
@import 'dropdown';
|
||||
@import 'text';
|
||||
@@ -0,0 +1,42 @@
|
||||
@use 'sass:map';
|
||||
@use '@beeline/design-tokens/scss/tokens/globals';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/light';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/dark';
|
||||
@use '@beeline/design-tokens/scss/tokens/components/button';
|
||||
|
||||
.table {
|
||||
.dark-theme & {
|
||||
color: map.get(dark.$theme, 'color-text-active');
|
||||
background-color: map.get(dark.$theme, 'color-background-base');
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 1px solid map.get(dark.$theme, 'color-control-background');
|
||||
}
|
||||
|
||||
th {
|
||||
color: map.get(dark.$theme, 'color-text-active');
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: globals.$font-weight-medium;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:last-child {
|
||||
td,
|
||||
th {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as *;
|
||||
|
||||
code {
|
||||
background-color: $color-background-base;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: $color-text-active;
|
||||
background-color: $color-background-base;
|
||||
}
|
||||
|
||||
.help {
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
@use '@beeline/design-tokens/scss/mixin' as bee;
|
||||
|
||||
.title {
|
||||
@include bee.h3();
|
||||
|
||||
&.is-1 {
|
||||
@include bee.h1();
|
||||
}
|
||||
&.is-2 {
|
||||
@include bee.h2();
|
||||
}
|
||||
&.is-3 {
|
||||
@include bee.h3();
|
||||
}
|
||||
&.is-4 {
|
||||
@include bee.h4();
|
||||
}
|
||||
&.is-5 {
|
||||
@include bee.h5();
|
||||
}
|
||||
&.is-6 {
|
||||
@include bee.h6();
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@include bee.subtitle2();
|
||||
|
||||
&.is-1 {
|
||||
@include bee.subtitle1();
|
||||
}
|
||||
&.is-2 {
|
||||
@include bee.subtitle2();
|
||||
}
|
||||
&.is-3 {
|
||||
@include bee.subtitle3();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import 'shared';
|
||||
@import 'select';
|
||||
@import 'input-textarea';
|
||||
@import 'title';
|
||||
@@ -0,0 +1,46 @@
|
||||
@use 'sass:map';
|
||||
// @use "@beeline/design-tokens/scss/tokens/globals";
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/light';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/dark';
|
||||
|
||||
%input-textarea {
|
||||
box-shadow: none;
|
||||
border: 1px solid transparent;
|
||||
color: map.get(light.$theme, 'color-text-active');
|
||||
background: map.get(light.$theme, 'color-control-background');
|
||||
|
||||
&:hover {
|
||||
border-color: map.get(light.$theme, 'color-border-focus');
|
||||
}
|
||||
|
||||
.dark-theme & {
|
||||
color: map.get(dark.$theme, 'color-text-active');
|
||||
background: map.get(dark.$theme, 'color-control-background');
|
||||
|
||||
&:hover {
|
||||
border-color: map.get(dark.$theme, 'color-border-focus');
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active {
|
||||
box-shadow: none !important;
|
||||
border-color: map.get(light.$theme, 'color-border-focus');
|
||||
background: map.get(light.$theme, 'color-background-base');
|
||||
|
||||
.dark-theme & {
|
||||
background: map.get(dark.$theme, 'color-background-base');
|
||||
border-color: map.get(dark.$theme, 'color-border-focus');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
@extend %input-textarea;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
@extend %input-textarea;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user