VEGA-6267: добавление автоматического обновления шрифтов дизайн-системы и отключение темной темы
This commit is contained in:
Захаров Дмитрий Анатольевич
committed by
Речкина Елена Валерьевна
Речкина Елена Валерьевна
parent
dfebbc3c45
commit
b948e5a433
Generated
+1589
-1150
File diff suppressed because it is too large
Load Diff
+10
-9
@@ -15,16 +15,17 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@beeline/design-tokens": "1.31.0",
|
||||
"vue": "3.4.7"
|
||||
"@beeline/design-tokens": "^1.31.6",
|
||||
"vue": "^3.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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"
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,9 @@
|
||||
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
|
||||
@@ -47,6 +50,7 @@ export default defineConfig({
|
||||
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)
|
||||
@@ -54,8 +58,31 @@ export default defineConfig({
|
||||
},
|
||||
vite: {
|
||||
resolve: {
|
||||
alias: overrideComponents(),
|
||||
}
|
||||
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',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
locales: {
|
||||
root: {
|
||||
|
||||
@@ -76,7 +76,7 @@ const pageName = computed(() =>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use 'src/assets/scss/app/helpers/media';
|
||||
@use '@/scss/helpers/media';
|
||||
|
||||
.VPDoc {
|
||||
padding: 32px 24px 96px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as theme;
|
||||
@use 'src/assets/scss/app/helpers/media';
|
||||
@use '@/scss/helpers/media';
|
||||
|
||||
.VPSidebar {
|
||||
--vp-sidebar-bg-color: var(--vp-c-bg);
|
||||
|
||||
+5
@@ -1,3 +1,8 @@
|
||||
@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';
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
@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);
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
@forward "media";
|
||||
+3
-1
@@ -1,3 +1,5 @@
|
||||
@use "sass:map";
|
||||
|
||||
// @deprecated
|
||||
@mixin media($minWidth, $maxWidth) {
|
||||
@media (min-width: $minWidth) and (max-width: $maxWidth) {
|
||||
@@ -27,7 +29,7 @@ $breakpoints: (
|
||||
);
|
||||
|
||||
@mixin max($breakpoint) {
|
||||
$value: map-get($breakpoints, $breakpoint);
|
||||
$value: map.get($breakpoints, $breakpoint);
|
||||
|
||||
@if $value {
|
||||
@media (max-width: $value) {
|
||||
@@ -1,4 +1,3 @@
|
||||
@use "fonts";
|
||||
@use "design-system";
|
||||
@use "design-tokens";
|
||||
@use "vars";
|
||||
@use "components";
|
||||
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.
@@ -1,38 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
@import 'variables';
|
||||
@import 'base';
|
||||
@import 'form';
|
||||
@import 'helpers';
|
||||
@import 'components';
|
||||
@@ -1,3 +0,0 @@
|
||||
// Navbar
|
||||
$app-navbar-height: 3.5rem;
|
||||
$app-header-height: 64px;
|
||||
@@ -1,122 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@import 'fab';
|
||||
@@ -1 +0,0 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/formfield' as formfield;
|
||||
@@ -1,104 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as *;
|
||||
|
||||
.app-bg-status-error {
|
||||
background-color: $color-status-error-background;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.app-cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
@import 'text';
|
||||
@import 'color';
|
||||
@import 'media';
|
||||
@import 'common';
|
||||
@@ -1,80 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@import 'spinner';
|
||||
@@ -1,6 +0,0 @@
|
||||
@use 'src/assets/scss/app/variables' as v;
|
||||
|
||||
.app-loading-screen {
|
||||
display: block;
|
||||
height: calc(100vh - v.$app-header-height);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@forward 'text';
|
||||
@@ -1,29 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
@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);
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
@use '@beeline/design-tokens/scss/font-face' with (
|
||||
$font-path-beeline-sans: '../fonts/beeline-sans'
|
||||
);
|
||||
@@ -1,40 +0,0 @@
|
||||
// @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';
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
@import 'fonts';
|
||||
@import 'icons';
|
||||
@import 'base';
|
||||
@import 'scrollbar';
|
||||
@@ -1,29 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
@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';
|
||||
@@ -1,12 +0,0 @@
|
||||
@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');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
@import 'button';
|
||||
@import 'title';
|
||||
@import 'box';
|
||||
@import 'form';
|
||||
@import 'table';
|
||||
@import 'dropdown';
|
||||
@import 'text';
|
||||
@@ -1,42 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
@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();
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
@import 'shared';
|
||||
@import 'select';
|
||||
@import 'input-textarea';
|
||||
@import 'title';
|
||||
@@ -1,46 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
@use 'sass:map';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/dark';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/light';
|
||||
|
||||
.select {
|
||||
select {
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 1px solid map.get(light.$theme, 'color-border-focus');
|
||||
background-color: map.get(light.$theme, 'color-background-base');
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-multiple):not(.is-loading)::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active {
|
||||
select {
|
||||
border: 1px solid map.get(light.$theme, 'color-border-focus');
|
||||
background-color: map.get(light.$theme, 'color-background-base');
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dark-theme & {
|
||||
select {
|
||||
border: 1px solid map.get(dark.$theme, 'color-border-focus');
|
||||
background-color: map.get(dark.$theme, 'color-background-base');
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark-theme & {
|
||||
color: map.get(dark.$theme, 'color-text-active');
|
||||
|
||||
& select {
|
||||
color: map.get(dark.$theme, 'color-text-active');
|
||||
background-color: map.get(dark.$theme, 'color-control-background');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
@use 'sass:map';
|
||||
@use '@beeline/design-tokens/scss/tokens/globals';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/dark';
|
||||
|
||||
.label {
|
||||
line-height: globals.$font-line-height-caption;
|
||||
|
||||
.dark-theme & {
|
||||
color: map.get(dark.$theme, 'color-text-inactive');
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
@use 'sass:map';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/dark';
|
||||
|
||||
.title {
|
||||
.dark-theme & {
|
||||
color: map.get(dark.$theme, 'color-text-active');
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
.dark-theme & {
|
||||
color: map.get(dark.$theme, 'color-text-inactive');
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
@use 'beeline';
|
||||
@use 'bulma';
|
||||
@use 'app';
|
||||
|
||||
.proto {
|
||||
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
||||
color: #f55;
|
||||
}
|
||||
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.
Reference in New Issue
Block a user