mirror of
https://github.com/directus/directus.git
synced 2026-04-25 03:00:53 -04:00
Merge pull request #25370 from directus/florian/cms-1044-logical-properties
Add Stylelint and refactor to use logical properties
This commit is contained in:
Alex Gaillard
5
.changeset/curvy-hands-judge.md
Normal file
5
.changeset/curvy-hands-judge.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@directus/app': minor
|
||||
---
|
||||
|
||||
Added Stylelint and refactored the styles to take advantage of logical properties
|
||||
19
.github/workflows/check.yml
vendored
19
.github/workflows/check.yml
vendored
@@ -33,6 +33,25 @@ jobs:
|
||||
- name: Run Linter
|
||||
run: pnpm exec eslint ${{ steps.changed-files.outputs.all_changed_files }}
|
||||
|
||||
stylelint:
|
||||
name: Stylelint
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Get changed files
|
||||
id: changed-files
|
||||
uses: tj-actions/changed-files@v45
|
||||
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Prepare
|
||||
uses: ./.github/actions/prepare
|
||||
with:
|
||||
build: false
|
||||
|
||||
- name: Run Stylelinter
|
||||
run: pnpm exec stylelint '**/*.{css,scss,vue}' --ignore-path .gitignore
|
||||
|
||||
format:
|
||||
name: Format
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -12,6 +12,7 @@ coverage/
|
||||
**/.vitepress/cache/
|
||||
**/.vitepress/.temp/
|
||||
.eslintcache
|
||||
.stylelintcache
|
||||
|
||||
# Dotenv configs
|
||||
.env
|
||||
@@ -26,6 +27,7 @@ debug
|
||||
.devcontainer/
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
!.vscode/settings.json
|
||||
.idea/
|
||||
*.code-workspace
|
||||
.history/
|
||||
|
||||
54
.stylelintrc.json
Normal file
54
.stylelintrc.json
Normal file
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"extends": ["stylelint-config-standard"],
|
||||
|
||||
"plugins": ["stylelint-use-logical"],
|
||||
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["**/*.scss"],
|
||||
"extends": ["stylelint-config-standard-scss"]
|
||||
},
|
||||
{
|
||||
"files": ["**/*.vue"],
|
||||
"extends": ["stylelint-config-standard-scss", "stylelint-config-standard-vue/scss"]
|
||||
}
|
||||
],
|
||||
|
||||
"ignoreFiles": ["app/src/__histoire__/**", "docs/**"],
|
||||
|
||||
"rules": {
|
||||
"alpha-value-notation": "number",
|
||||
"at-rule-empty-line-before": [
|
||||
"always",
|
||||
{ "ignore": ["after-comment", "first-nested", "inside-block", "blockless-after-same-name-blockless"] }
|
||||
],
|
||||
"comment-empty-line-before": [
|
||||
"always",
|
||||
{
|
||||
"except": ["first-nested"],
|
||||
"ignore": ["after-comment", "stylelint-commands"]
|
||||
}
|
||||
],
|
||||
"custom-property-empty-line-before": [
|
||||
"always",
|
||||
{ "except": ["after-comment", "after-custom-property", "first-nested"] }
|
||||
],
|
||||
"custom-property-pattern": null,
|
||||
"declaration-empty-line-before": null,
|
||||
"font-family-name-quotes": "always-unless-keyword",
|
||||
"font-family-no-missing-generic-family-keyword": [true, { "ignoreFontFamilies": ["Material Symbols"] }],
|
||||
"media-feature-range-notation": null,
|
||||
"no-descending-specificity": null,
|
||||
"property-no-vendor-prefix": [true, { "ignoreProperties": ["user-select", "appearance", "mask-image"] }],
|
||||
"rule-empty-line-before": ["always", { "ignore": ["after-comment", "first-nested", "inside-block"] }],
|
||||
"selector-class-pattern": null,
|
||||
"selector-not-notation": null,
|
||||
"selector-pseudo-element-no-unknown": [true, { "ignorePseudoElements": ["v-deep", "v-global", "v-slotted"] }],
|
||||
"value-keyword-case": [
|
||||
"lower",
|
||||
{ "ignoreProperties": ["text-rendering"], "ignoreFunctions": ["v-bind"], "ignoreKeywords": ["currentColor"] }
|
||||
],
|
||||
|
||||
"csstools/use-logical": "always"
|
||||
}
|
||||
}
|
||||
8
.vscode/extensions.json
vendored
8
.vscode/extensions.json
vendored
@@ -1,3 +1,9 @@
|
||||
{
|
||||
"recommendations": ["dbaeumer.vscode-eslint", "editorconfig.editorconfig", "esbenp.prettier-vscode", "vue.volar"]
|
||||
"recommendations": [
|
||||
"dbaeumer.vscode-eslint",
|
||||
"stylelint.vscode-stylelint",
|
||||
"editorconfig.editorconfig",
|
||||
"esbenp.prettier-vscode",
|
||||
"vue.volar"
|
||||
]
|
||||
}
|
||||
|
||||
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"stylelint.validate": ["css", "scss", "vue"]
|
||||
}
|
||||
@@ -116,11 +116,11 @@ useSystem();
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global(#app) {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
#directus {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.hydrating {
|
||||
@@ -129,8 +129,8 @@ useSystem();
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
@@ -145,6 +145,6 @@ useSystem();
|
||||
}
|
||||
|
||||
.error {
|
||||
margin-bottom: 24px;
|
||||
margin-block-end: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,6 @@
|
||||
|
||||
exports[`Mount component 1`] = `
|
||||
"<div data-v-f02f7ebf="" class="v-progress-linear danger">
|
||||
<div data-v-f02f7ebf="" class="inner" style="width: 0%;"></div>Slot Content
|
||||
<div data-v-f02f7ebf="" class="inner" style="inline-size: 0%;"></div>Slot Content
|
||||
</div>"
|
||||
`;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Mount component 1`] = `
|
||||
"<div data-v-c965220a="" class="v-workspace" style="width: 480px; height: 280px;">
|
||||
<div data-v-c965220a="" class="workspace" style="transform: scale(1); width: 480px; height: 280px;">
|
||||
"<div data-v-c965220a="" class="v-workspace" style="inline-size: 480px; block-size: 280px;">
|
||||
<div data-v-c965220a="" class="workspace" style="transform: scale(1); inline-size: 480px; block-size: 280px;">
|
||||
<v-workspace-tile-stub data-v-c965220a="" id="1" x="1" y="1" width="10" height="10" name="My Tile 1" edit-mode="false" resizable="true"></v-workspace-tile-stub>
|
||||
<v-workspace-tile-stub data-v-c965220a="" id="2" x="15" y="5" width="10" height="10" name="My Tile 2" edit-mode="false" resizable="true"></v-workspace-tile-stub>
|
||||
</div>
|
||||
|
||||
@@ -12,12 +12,12 @@
|
||||
transition: opacity var(--slow) var(--transition);
|
||||
|
||||
&.center > *:not(.v-overlay) {
|
||||
transform: translateY(0px);
|
||||
transform: translateY(0);
|
||||
transition: transform var(--slow) var(--transition-in);
|
||||
}
|
||||
|
||||
&.right > *:not(.v-overlay) {
|
||||
transform: translateX(0px);
|
||||
transform: translateX(0);
|
||||
transition: transform var(--slow) var(--transition-in);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import { capitalize } from 'lodash';
|
||||
|
||||
interface HTMLExpandElement extends HTMLElement {
|
||||
_parent?: (Node & ParentNode & HTMLElement) | null;
|
||||
_initialStyle?: {
|
||||
transition: string;
|
||||
visibility: string;
|
||||
overflow: string;
|
||||
height?: string | null;
|
||||
width?: string | null;
|
||||
blockSize?: string | null;
|
||||
inlineSize?: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -27,8 +25,9 @@ export default function (
|
||||
...args: any[]
|
||||
) => void,
|
||||
): Record<string, any> {
|
||||
const sizeProperty = xAxis ? 'width' : ('height' as 'width' | 'height');
|
||||
const offsetProperty = `offset${capitalize(sizeProperty)}` as 'offsetHeight' | 'offsetWidth';
|
||||
const sizeProperty = (xAxis ? 'inlineSize' : 'blockSize') as 'inlineSize' | 'blockSize';
|
||||
const cssSizeProperty = (xAxis ? 'inline-size' : 'block-size') as 'inline-size' | 'block-size';
|
||||
const offsetProperty = (xAxis ? 'offsetWidth' : 'offsetHeight') as 'offsetHeight' | 'offsetWidth';
|
||||
|
||||
return {
|
||||
beforeEnter(el: HTMLExpandElement) {
|
||||
@@ -60,7 +59,7 @@ export default function (
|
||||
void el.offsetHeight; // force reflow
|
||||
|
||||
el.style.transition =
|
||||
initialStyle.transition !== '' ? initialStyle.transition : `${sizeProperty} var(--medium) var(--transition)`;
|
||||
initialStyle.transition !== '' ? initialStyle.transition : `${cssSizeProperty} var(--medium) var(--transition)`;
|
||||
|
||||
if (expandedParentClass && el._parent) {
|
||||
el._parent.classList.add(expandedParentClass);
|
||||
@@ -107,7 +106,7 @@ export default function (
|
||||
void el.offsetHeight; // force reflow
|
||||
|
||||
el.style.transition =
|
||||
initialStyle.transition !== '' ? initialStyle.transition : `${sizeProperty} var(--medium) var(--transition)`;
|
||||
initialStyle.transition !== '' ? initialStyle.transition : `${cssSizeProperty} var(--medium) var(--transition)`;
|
||||
|
||||
if (expandedParentClass && el._parent) {
|
||||
el._parent.classList.add(expandedParentClass);
|
||||
|
||||
@@ -20,8 +20,8 @@ const show = ref(true);
|
||||
<style>
|
||||
.box {
|
||||
background-color: var(--theme--background-normal);
|
||||
height: 200px;
|
||||
width: 400px;
|
||||
block-size: 200px;
|
||||
inline-size: 400px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@@ -20,8 +20,8 @@ const show = ref(true);
|
||||
<style>
|
||||
.box {
|
||||
background-color: var(--theme--background-normal);
|
||||
height: 200px;
|
||||
width: 400px;
|
||||
block-size: 200px;
|
||||
inline-size: 400px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@@ -20,8 +20,8 @@ const show = ref(true);
|
||||
<style>
|
||||
.box {
|
||||
background-color: var(--theme--background-normal);
|
||||
height: 200px;
|
||||
width: 400px;
|
||||
block-size: 200px;
|
||||
inline-size: 400px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@@ -42,8 +42,8 @@ const sizeClass = useSizeClass(props);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--v-avatar-size, 48px);
|
||||
height: var(--v-avatar-size, 48px);
|
||||
inline-size: var(--v-avatar-size, 48px);
|
||||
block-size: var(--v-avatar-size, 48px);
|
||||
overflow: hidden;
|
||||
color: var(--theme--foreground-subdued);
|
||||
white-space: nowrap;
|
||||
@@ -75,8 +75,8 @@ const sizeClass = useSizeClass(props);
|
||||
}
|
||||
|
||||
:slotted(img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -62,15 +62,15 @@ withDefaults(
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: calc(var(--v-badge-size, 16px) / -2 + var(--v-badge-offset-y, 0px));
|
||||
right: calc(var(--v-badge-size, 16px) / -2 + var(--v-badge-offset-x, 0px));
|
||||
inset-block-start: calc(var(--v-badge-size, 16px) / -2 + var(--v-badge-offset-y, 0px));
|
||||
inset-inline-end: calc(var(--v-badge-size, 16px) / -2 + var(--v-badge-offset-x, 0px));
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: max-content;
|
||||
min-width: var(--v-badge-size, 16px);
|
||||
height: var(--v-badge-size, 16px);
|
||||
inline-size: max-content;
|
||||
min-inline-size: var(--v-badge-size, 16px);
|
||||
block-size: var(--v-badge-size, 16px);
|
||||
padding: 0 5px;
|
||||
color: var(--v-badge-color, var(--white));
|
||||
font-weight: 800;
|
||||
@@ -79,13 +79,13 @@ withDefaults(
|
||||
border-radius: calc(var(--v-badge-size, 16px) / 2);
|
||||
|
||||
&.left {
|
||||
right: unset;
|
||||
left: calc(var(--v-badge-size, 16px) / -2 + var(--v-badge-offset-x, 0px));
|
||||
inset-inline-end: unset;
|
||||
inset-inline-start: calc(var(--v-badge-size, 16px) / -2 + var(--v-badge-offset-x, 0px));
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
top: unset;
|
||||
bottom: calc(var(--v-badge-size, 16px) / -2 + var(--v-badge-offset-y, 0px));
|
||||
inset-block-start: unset;
|
||||
inset-block-end: calc(var(--v-badge-size, 16px) / -2 + var(--v-badge-offset-y, 0px));
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
@@ -96,9 +96,9 @@ withDefaults(
|
||||
}
|
||||
|
||||
&.dot {
|
||||
width: var(--v-badge-size, 16px);
|
||||
min-width: 0;
|
||||
height: var(--v-badge-size, 16px);
|
||||
inline-size: var(--v-badge-size, 16px);
|
||||
min-inline-size: 0;
|
||||
block-size: var(--v-badge-size, 16px);
|
||||
border: 0;
|
||||
|
||||
* {
|
||||
|
||||
@@ -160,7 +160,7 @@ defineProps<{
|
||||
<style scoped>
|
||||
.v-banner {
|
||||
container-type: inline-size;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
padding: var(--theme--banner--padding);
|
||||
border-radius: var(--theme--banner--border-radius);
|
||||
background-color: var(--theme--banner--background);
|
||||
@@ -172,8 +172,8 @@ defineProps<{
|
||||
|
||||
.avatar {
|
||||
flex-shrink: 0;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
inline-size: 120px;
|
||||
block-size: 120px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
@@ -15,7 +15,7 @@ interface Props {
|
||||
rounded?: boolean;
|
||||
/** No background */
|
||||
outlined?: boolean;
|
||||
/** Remove padding / min-width. Meant to be used with just an icon as content */
|
||||
/** Remove padding / min-inline-size. Meant to be used with just an icon as content */
|
||||
icon?: boolean;
|
||||
/** Element type to be used */
|
||||
type?: string;
|
||||
@@ -267,7 +267,7 @@ async function onClick(event: MouseEvent) {
|
||||
|
||||
.v-button.full-width {
|
||||
display: flex;
|
||||
min-width: 100%;
|
||||
min-inline-size: 100%;
|
||||
}
|
||||
|
||||
body.dark .button {
|
||||
@@ -280,9 +280,9 @@ body.dark .button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: var(--v-button-width, auto);
|
||||
min-width: var(--v-button-min-width, 140px);
|
||||
height: var(--v-button-height, 44px);
|
||||
inline-size: var(--v-button-width, auto);
|
||||
min-inline-size: var(--v-button-min-width, 140px);
|
||||
block-size: var(--v-button-height, 44px);
|
||||
padding: var(--v-button-padding, 0 19px);
|
||||
color: var(--v-button-color, var(--foreground-inverted));
|
||||
font-weight: var(--v-button-font-weight, 600);
|
||||
@@ -294,7 +294,7 @@ body.dark .button {
|
||||
border-radius: var(--theme--border-radius);
|
||||
cursor: pointer;
|
||||
transition: var(--fast) var(--transition);
|
||||
transition-property: background-color border;
|
||||
transition-property: background-color, border;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
@@ -383,18 +383,18 @@ body.dark .button {
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: var(--v-button-height, 44px);
|
||||
min-width: 0;
|
||||
inline-size: var(--v-button-height, 44px);
|
||||
min-inline-size: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.button.full-width {
|
||||
min-width: 100%;
|
||||
min-inline-size: 100%;
|
||||
}
|
||||
|
||||
.content,
|
||||
.spinner {
|
||||
max-width: 100%;
|
||||
max-inline-size: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@@ -413,8 +413,8 @@ body.dark .button {
|
||||
|
||||
.spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
|
||||
@@ -10,6 +10,6 @@
|
||||
}
|
||||
|
||||
.v-card-actions > :slotted(.v-button + .v-button) {
|
||||
margin-left: 12px;
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-card-subtitle {
|
||||
margin-top: -16px;
|
||||
margin-block-start: -16px;
|
||||
padding: 16px;
|
||||
padding-top: 0;
|
||||
padding-block-start: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
<style lang="scss" scoped>
|
||||
.v-card-text {
|
||||
padding: var(--v-card-padding, 16px);
|
||||
padding-top: 0;
|
||||
padding-bottom: 12px;
|
||||
padding-block: 0 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-top: 4px;
|
||||
margin-block-start: 4px;
|
||||
padding: var(--v-card-padding, 16px);
|
||||
font-weight: 600;
|
||||
line-height: 1.6em;
|
||||
|
||||
@@ -32,10 +32,10 @@ withDefaults(defineProps<Props>(), {
|
||||
.v-card {
|
||||
--theme--form--row-gap: 52px;
|
||||
|
||||
min-width: var(--v-card-min-width, none);
|
||||
max-width: 400px;
|
||||
height: auto;
|
||||
max-height: 90vh;
|
||||
min-inline-size: var(--v-card-min-width, none);
|
||||
max-inline-size: 400px;
|
||||
block-size: auto;
|
||||
max-block-size: 90vh;
|
||||
overflow: auto;
|
||||
|
||||
/* Page Content Spacing */
|
||||
@@ -45,8 +45,8 @@ withDefaults(defineProps<Props>(), {
|
||||
border-radius: var(--theme--border-radius);
|
||||
|
||||
& > :first-child {
|
||||
border-top-left-radius: var(--theme--border-radius);
|
||||
border-top-right-radius: var(--theme--border-radius);
|
||||
border-start-start-radius: var(--theme--border-radius);
|
||||
border-start-end-radius: var(--theme--border-radius);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
|
||||
@@ -421,6 +421,6 @@ function getRecursiveChildrenValues(mode: 'all' | 'branch' | 'leaf', children: R
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
padding-left: 32px !important;
|
||||
padding-inline-start: 32px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -154,7 +154,7 @@ function onClickIcon(e: MouseEvent): void {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
@@ -162,15 +162,15 @@ function onClickIcon(e: MouseEvent): void {
|
||||
|
||||
.label:not(:empty) {
|
||||
flex-grow: 1;
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
transition: color var(--fast) var(--transition);
|
||||
@include mixins.no-wrap;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid var(--theme--form--field--input--border-color);
|
||||
border-block-end: 2px solid var(--theme--form--field--input--border-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@@ -197,8 +197,8 @@ function onClickIcon(e: MouseEvent): void {
|
||||
--focus-ring-offset: var(--focus-ring-offset-invert);
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: var(--theme--form--field--input--height);
|
||||
inline-size: 100%;
|
||||
block-size: var(--theme--form--field--input--height);
|
||||
padding: 10px; // 14 - 4 (border)
|
||||
background-color: var(--theme--form--field--input--background);
|
||||
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
|
||||
@@ -211,11 +211,11 @@ function onClickIcon(e: MouseEvent): void {
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
border-radius: var(--theme--border-radius);
|
||||
content: '';
|
||||
}
|
||||
@@ -266,7 +266,7 @@ function onClickIcon(e: MouseEvent): void {
|
||||
}
|
||||
|
||||
.append {
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -109,7 +109,7 @@ function onCloseClick(event: MouseEvent) {
|
||||
.v-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
block-size: 36px;
|
||||
padding: var(--v-chip-padding, 0 8px);
|
||||
color: var(--v-chip-color, var(--theme--foreground));
|
||||
font-weight: var(--weight-normal);
|
||||
@@ -143,28 +143,28 @@ function onCloseClick(event: MouseEvent) {
|
||||
}
|
||||
|
||||
&.x-small {
|
||||
height: 20px;
|
||||
block-size: 20px;
|
||||
padding: var(--v-chip-padding, 0 6px);
|
||||
font-size: 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&.small {
|
||||
height: 24px;
|
||||
block-size: 24px;
|
||||
padding: var(--v-chip-padding, 0 8px);
|
||||
font-size: 14px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
&.large {
|
||||
height: 44px;
|
||||
block-size: 44px;
|
||||
padding: var(--v-chip-padding, 0 20px);
|
||||
font-size: 16px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
&.x-large {
|
||||
height: 48px;
|
||||
block-size: 48px;
|
||||
padding: var(--v-chip-padding, 0 20px);
|
||||
font-size: 18px;
|
||||
border-radius: 24px;
|
||||
@@ -181,13 +181,13 @@ function onCloseClick(event: MouseEvent) {
|
||||
|
||||
.close-outline {
|
||||
position: relative;
|
||||
right: -4px;
|
||||
inset-inline-end: -4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: 4px;
|
||||
inline-size: 14px;
|
||||
block-size: 14px;
|
||||
margin-inline-start: 4px;
|
||||
background-color: var(--v-chip-close-color, var(--theme--danger));
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
@@ -68,8 +68,8 @@ function toggle() {
|
||||
<style lang="scss" scoped>
|
||||
.activator {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
inline-size: 100%;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.v-detail:not(.disabled) .v-divider {
|
||||
@@ -81,10 +81,10 @@ function toggle() {
|
||||
}
|
||||
|
||||
.v-icon {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 12px;
|
||||
margin-block-start: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -128,12 +128,12 @@ function useOverlayFocusTrap() {
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 500;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
&.keep-behind {
|
||||
z-index: 490;
|
||||
@@ -142,7 +142,7 @@ function useOverlayFocusTrap() {
|
||||
|
||||
.container > :slotted(*) {
|
||||
z-index: 2;
|
||||
box-shadow: 0px 4px 12px rgb(38 50 56 / 0.1);
|
||||
box-shadow: 0 4px 12px rgb(38 50 56 / 0.1);
|
||||
}
|
||||
|
||||
.container.center {
|
||||
@@ -176,25 +176,24 @@ function useOverlayFocusTrap() {
|
||||
}
|
||||
|
||||
.container :slotted(.v-card) .v-card-title {
|
||||
padding-bottom: 8px;
|
||||
padding-block-end: 8px;
|
||||
}
|
||||
|
||||
.container :slotted(.v-card) .v-card-actions {
|
||||
flex-direction: column-reverse;
|
||||
flex-wrap: wrap;
|
||||
flex-flow: column-reverse wrap;
|
||||
}
|
||||
|
||||
.container :slotted(.v-card) .v-card-actions .v-button {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.container :slotted(.v-card) .v-card-actions .v-button .button {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.container :slotted(.v-card) .v-card-actions > .v-button + .v-button {
|
||||
margin-bottom: 20px;
|
||||
margin-left: 0;
|
||||
margin-block-end: 20px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.container :slotted(.v-sheet) {
|
||||
@@ -217,16 +216,16 @@ function useOverlayFocusTrap() {
|
||||
}
|
||||
|
||||
.container :slotted(.v-card) .v-card-actions .v-button {
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
}
|
||||
|
||||
.container :slotted(.v-card) .v-card-actions .v-button .button {
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
}
|
||||
|
||||
.container :slotted(.v-card) .v-card-actions > .v-button + .v-button {
|
||||
margin-bottom: 0;
|
||||
margin-left: 12px;
|
||||
margin-block-end: 0;
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -37,9 +37,7 @@ withDefaults(defineProps<Props>(), {
|
||||
*/
|
||||
|
||||
.v-divider {
|
||||
flex-basis: 0px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex: 1 1 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
@@ -47,8 +45,8 @@ withDefaults(defineProps<Props>(), {
|
||||
hr {
|
||||
flex-grow: 1;
|
||||
order: 1;
|
||||
max-width: 100%;
|
||||
margin-top: 8px;
|
||||
max-inline-size: 100%;
|
||||
margin-block-start: 8px;
|
||||
border: solid;
|
||||
border-color: var(--v-divider-color, var(--theme--form--field--input--border-color));
|
||||
border-width: var(--v-divider-thickness, var(--theme--border-width)) 0 0 0;
|
||||
@@ -59,13 +57,13 @@ withDefaults(defineProps<Props>(), {
|
||||
color: var(--v-divider-label-color, var(--theme--foreground-accent));
|
||||
|
||||
:slotted(.v-icon) {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.type-text {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
color: var(--v-divider-label-color, var(--theme--foreground-accent));
|
||||
font-weight: 600;
|
||||
transition: color var(--fast) var(--transition);
|
||||
@@ -82,7 +80,7 @@ withDefaults(defineProps<Props>(), {
|
||||
|
||||
span.wrapper {
|
||||
order: 0;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -96,11 +94,11 @@ withDefaults(defineProps<Props>(), {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-self: stretch;
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
hr {
|
||||
width: 0px;
|
||||
max-width: 0px;
|
||||
inline-size: 0;
|
||||
max-inline-size: 0;
|
||||
border-width: 0 var(--theme--border-width) 0 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -146,9 +146,9 @@ const internalActive = computed({
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 856px;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
max-inline-size: 856px;
|
||||
block-size: 100%;
|
||||
background-color: var(--theme--background);
|
||||
|
||||
.cancel {
|
||||
@@ -156,8 +156,8 @@ const internalActive = computed({
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: -76px;
|
||||
inset-block-start: 32px;
|
||||
inset-inline-start: -76px;
|
||||
|
||||
@media (min-width: 960px) {
|
||||
display: inline-flex;
|
||||
@@ -197,10 +197,10 @@ const internalActive = computed({
|
||||
position: relative;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 220px;
|
||||
height: 100%;
|
||||
inline-size: 220px;
|
||||
block-size: 100%;
|
||||
background: var(--theme--navigation--background);
|
||||
border-right: var(--theme--navigation--border-width) solid var(--theme--navigation--border-color);
|
||||
border-inline-end: var(--theme--navigation--border-width) solid var(--theme--navigation--border-color);
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
@@ -213,13 +213,11 @@ const internalActive = computed({
|
||||
--v-list-item-background-color: var(--theme--navigation--list--background);
|
||||
--v-list-item-background-color-hover: var(--theme--navigation--list--background-hover);
|
||||
--v-list-item-background-color-active: var(--theme--navigation--list--background-active);
|
||||
|
||||
--v-divider-color: var(--theme--navigation--list--divider--border-color);
|
||||
--v-divider-thickness: var(--theme--navigation--list--divider--border-width);
|
||||
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
block-size: 100%;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -240,7 +238,7 @@ const internalActive = computed({
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
scroll-padding-top: 100px;
|
||||
scroll-padding-block-start: 100px;
|
||||
|
||||
@media (min-width: 600px) {
|
||||
--content-padding: 32px;
|
||||
@@ -249,12 +247,12 @@ const internalActive = computed({
|
||||
}
|
||||
|
||||
.main.small-search-input:deep(.search-input.filter-active) {
|
||||
width: 300px !important;
|
||||
inline-size: 300px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
width: calc(100% - 64px);
|
||||
inline-size: calc(100% - 64px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -59,7 +59,7 @@ async function copyError() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-error {
|
||||
max-height: 50vh;
|
||||
max-block-size: 50vh;
|
||||
padding: 6px 12px;
|
||||
overflow: auto;
|
||||
color: var(--theme--danger);
|
||||
@@ -68,7 +68,7 @@ async function copyError() {
|
||||
border-radius: var(--theme--border-radius);
|
||||
|
||||
.copy-error {
|
||||
margin-left: 12px;
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -101,14 +101,14 @@ function toggle(item: Record<string, any>) {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
inline-size: 100%;
|
||||
margin-block-end: 8px;
|
||||
padding: 12px;
|
||||
background-color: var(--theme--background-normal);
|
||||
border: var(--theme--border-width) solid var(--theme--background-normal);
|
||||
border-radius: 6px;
|
||||
backface-visibility: hidden;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
transition-timing-function: var(--transition);
|
||||
transition-duration: var(--fast);
|
||||
transition-property: background-color, border-color;
|
||||
@@ -125,9 +125,9 @@ function toggle(item: Record<string, any>) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
inline-size: 44px;
|
||||
block-size: 44px;
|
||||
margin-inline-end: 12px;
|
||||
background-color: var(--theme--background);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -308,7 +308,7 @@ function setContent() {
|
||||
.content {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
padding: var(--theme--form--field--input--padding) 0;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
@@ -316,8 +316,8 @@ function setContent() {
|
||||
white-space: nowrap;
|
||||
|
||||
:deep(span) {
|
||||
min-width: 1px;
|
||||
min-height: 1em;
|
||||
min-inline-size: 1px;
|
||||
min-block-size: 1em;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
@@ -345,8 +345,8 @@ function setContent() {
|
||||
|
||||
.placeholder {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 14px;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 14px;
|
||||
color: var(--theme--foreground-subdued);
|
||||
transform: translateY(-50%);
|
||||
-webkit-user-select: none;
|
||||
|
||||
@@ -97,11 +97,11 @@ const value = computed(() =>
|
||||
|
||||
.v-skeleton-loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
&.subdued {
|
||||
|
||||
@@ -76,7 +76,7 @@ const { t } = useI18n();
|
||||
.field-label {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
margin-block-end: 8px;
|
||||
color: var(--theme--form--field--label--foreground);
|
||||
|
||||
.v-text-overflow {
|
||||
@@ -89,28 +89,28 @@ const { t } = useI18n();
|
||||
}
|
||||
|
||||
.v-checkbox {
|
||||
height: 18px; // Don't push down label with normal icon height (24px)
|
||||
margin-right: 4px;
|
||||
block-size: 18px; // Don't push down label with normal icon height (24px)
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
.v-chip {
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: 3px;
|
||||
margin-inline-start: 3px;
|
||||
}
|
||||
|
||||
.required {
|
||||
--v-icon-color: var(--theme--primary);
|
||||
|
||||
margin-left: 3px;
|
||||
margin-inline-start: 3px;
|
||||
|
||||
&.has-badge {
|
||||
margin-right: 6px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.ctx-arrow {
|
||||
margin-top: -3px;
|
||||
margin-block-start: -3px;
|
||||
color: var(--theme--foreground-subdued);
|
||||
opacity: 0;
|
||||
transition: opacity var(--fast) var(--transition);
|
||||
@@ -131,10 +131,10 @@ const { t } = useI18n();
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-top: -2px;
|
||||
margin-left: 5px;
|
||||
block-size: 24px;
|
||||
inline-size: 24px;
|
||||
margin-block-start: -2px;
|
||||
margin-inline-start: 5px;
|
||||
color: var(--theme--foreground-subdued);
|
||||
transition: color var(--fast) var(--transition);
|
||||
|
||||
@@ -152,19 +152,19 @@ const { t } = useI18n();
|
||||
&.edited {
|
||||
.edit-dot {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: -7px;
|
||||
inset-block-start: 7px;
|
||||
inset-inline-start: -7px;
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
inline-size: 4px;
|
||||
block-size: 4px;
|
||||
background-color: var(--theme--foreground-subdued);
|
||||
border-radius: 4px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.field-name {
|
||||
margin-left: -16px;
|
||||
padding-left: 16px;
|
||||
margin-inline-start: -16px;
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -103,7 +103,7 @@ const setRawValue = () => {
|
||||
.input-code {
|
||||
:deep(.CodeMirror),
|
||||
:deep(.CodeMirror-scroll) {
|
||||
max-height: var(--input-height-max);
|
||||
max-block-size: var(--input-height-max);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -241,8 +241,8 @@ function useComputedValues() {
|
||||
.type-note {
|
||||
position: relative;
|
||||
display: block;
|
||||
max-width: 520px;
|
||||
margin-top: 4px;
|
||||
max-inline-size: 520px;
|
||||
margin-block-start: 4px;
|
||||
|
||||
:deep(a) {
|
||||
color: var(--theme--primary);
|
||||
@@ -265,12 +265,12 @@ function useComputedValues() {
|
||||
.validation-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 4px;
|
||||
margin-block-start: 4px;
|
||||
color: var(--theme--danger);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.label-spacer {
|
||||
height: 28px;
|
||||
block-size: 28px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -442,7 +442,7 @@ function useRawEditor() {
|
||||
@include mixins.form-grid;
|
||||
|
||||
.first-visible-field :deep(.presentation-divider) {
|
||||
margin-top: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
&.inline > .no-fields-info {
|
||||
@@ -451,8 +451,7 @@ function useRawEditor() {
|
||||
}
|
||||
|
||||
.v-divider {
|
||||
margin-bottom: 50px;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
margin-block-end: 50px;
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -104,8 +104,8 @@ function showCustomValidationMessage(validationError: ValidationErrorWithDetails
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.validation-errors-list {
|
||||
margin-top: 4px;
|
||||
padding-left: 28px;
|
||||
margin-block-start: 4px;
|
||||
padding-inline-start: 28px;
|
||||
|
||||
.field {
|
||||
cursor: pointer;
|
||||
@@ -117,11 +117,11 @@ function showCustomValidationMessage(validationError: ValidationErrorWithDetails
|
||||
|
||||
.validation-error .v-icon {
|
||||
vertical-align: text-top;
|
||||
margin-left: 0 !important;
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
margin-block-end: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -33,9 +33,9 @@ defineProps<Props>();
|
||||
.label {
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 55%;
|
||||
inset-block-start: 55%;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
@@ -46,10 +46,10 @@ defineProps<Props>();
|
||||
&.right {
|
||||
.label {
|
||||
background-color: var(--v-icon-file-background-color, var(--theme--background-normal));
|
||||
left: calc(100% - 12px - 3ch);
|
||||
text-align: left;
|
||||
inset-inline-start: calc(100% - 12px - 3ch);
|
||||
text-align: start;
|
||||
transform: none;
|
||||
padding-right: 8px;
|
||||
padding-inline-end: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -101,9 +101,9 @@ function emitClick(event: MouseEvent) {
|
||||
.v-icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: var(--v-icon-size, 24px);
|
||||
min-width: var(--v-icon-size, 24px);
|
||||
height: var(--v-icon-size, 24px);
|
||||
inline-size: var(--v-icon-size, 24px);
|
||||
min-inline-size: var(--v-icon-size, 24px);
|
||||
block-size: var(--v-icon-size, 24px);
|
||||
color: var(--v-icon-color, currentColor);
|
||||
font-size: 0;
|
||||
vertical-align: middle;
|
||||
@@ -149,8 +149,8 @@ function emitClick(event: MouseEvent) {
|
||||
fill: currentColor;
|
||||
|
||||
&.svg-inline--fa {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -185,18 +185,18 @@ function emitClick(event: MouseEvent) {
|
||||
}
|
||||
|
||||
&.left {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
|
||||
&.small {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
margin-left: 6px;
|
||||
margin-inline-start: 6px;
|
||||
|
||||
&.small {
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,9 +42,9 @@ withDefaults(defineProps<Props>(), {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 16px;
|
||||
inline-size: 100px;
|
||||
block-size: 100px;
|
||||
margin-block-end: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -69,23 +69,23 @@ withDefaults(defineProps<Props>(), {
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 8px;
|
||||
margin-block-end: 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 300px;
|
||||
max-inline-size: 300px;
|
||||
color: var(--theme--foreground-subdued);
|
||||
line-height: 22px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
margin-block-end: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -360,11 +360,11 @@ function stepDown() {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: max-content;
|
||||
height: var(--theme--form--field--input--height);
|
||||
inline-size: max-content;
|
||||
block-size: var(--theme--form--field--input--height);
|
||||
|
||||
.prepend-outer {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.input {
|
||||
@@ -372,10 +372,9 @@ function stepDown() {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
padding: var(--theme--form--field--input--padding);
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
padding-block: 0;
|
||||
color: var(--v-input-color, var(--theme--form--field--input--foreground));
|
||||
font-family: var(--v-input-font-family, var(--theme--fonts--sans--font-family));
|
||||
background-color: var(--v-input-background-color, var(--theme--form--field--input--background));
|
||||
@@ -386,15 +385,15 @@ function stepDown() {
|
||||
box-shadow: var(--theme--form--field--input--box-shadow);
|
||||
|
||||
.prepend {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.step-up {
|
||||
margin-bottom: -8px;
|
||||
margin-block-end: -8px;
|
||||
}
|
||||
|
||||
.step-down {
|
||||
margin-top: -8px;
|
||||
margin-block-start: -8px;
|
||||
}
|
||||
|
||||
.step-up,
|
||||
@@ -452,17 +451,16 @@ function stepDown() {
|
||||
|
||||
.append {
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
flex-grow: 1;
|
||||
width: 20px; /* allows flex to grow/shrink to allow for slots */
|
||||
height: 100%;
|
||||
inline-size: 20px; /* allows flex to grow/shrink to allow for slots */
|
||||
block-size: 100%;
|
||||
padding: var(--theme--form--field--input--padding);
|
||||
padding-right: 0px;
|
||||
padding-left: 0px;
|
||||
padding-inline: 0;
|
||||
font-family: var(--v-input-font-family, var(--theme--fonts--sans--font-family));
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
@@ -490,7 +488,7 @@ function stepDown() {
|
||||
}
|
||||
|
||||
&.small {
|
||||
height: 38px;
|
||||
block-size: 38px;
|
||||
|
||||
.input {
|
||||
padding: 8px 12px;
|
||||
@@ -498,10 +496,10 @@ function stepDown() {
|
||||
}
|
||||
|
||||
&.full-width {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -528,7 +526,7 @@ function stepDown() {
|
||||
}
|
||||
|
||||
.append-outer {
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -114,16 +114,16 @@ function onClick(event: MouseEvent) {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-list-group {
|
||||
margin-bottom: 4px;
|
||||
margin-block-end: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.activator-icon {
|
||||
--focus-ring-offset: 0;
|
||||
|
||||
margin-right: 0 !important;
|
||||
margin-inline-end: 0 !important;
|
||||
color: var(--theme--foreground-subdued);
|
||||
transform: rotate(0deg);
|
||||
transition: transform var(--medium) var(--transition);
|
||||
@@ -138,7 +138,7 @@ function onClick(event: MouseEvent) {
|
||||
}
|
||||
|
||||
.items {
|
||||
padding-left: 18px;
|
||||
padding-inline-start: 18px;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,9 +16,7 @@
|
||||
|
||||
.v-list-item-content {
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex: 1 1 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
@@ -33,14 +31,12 @@
|
||||
}
|
||||
|
||||
.v-list-item-content > :deep(*) {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
flex: 1 0 100%;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.v-list-item-content > :slotted(*:not(:last-child)) {
|
||||
margin-bottom: 2px;
|
||||
margin-block-end: 2px;
|
||||
}
|
||||
|
||||
.v-list:not(.nav) .v-list-item-content,
|
||||
|
||||
@@ -25,11 +25,11 @@ withDefaults(defineProps<Props>(), {
|
||||
|
||||
&:not(:only-child) {
|
||||
&:first-child {
|
||||
margin-right: 12px;
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: 12px;
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,16 +37,15 @@ withDefaults(defineProps<Props>(), {
|
||||
.v-list,
|
||||
.v-list-item {
|
||||
#{$this} {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
margin-block: 4px;
|
||||
|
||||
&:not(:only-child) {
|
||||
&:first-child {
|
||||
margin-right: 16px;
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: 16px;
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,11 +32,11 @@ withDefaults(defineProps<Props>(), {
|
||||
|
||||
&:not(:only-child) {
|
||||
&:first-child {
|
||||
margin-right: 12px;
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: 12px;
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -46,16 +46,15 @@ withDefaults(defineProps<Props>(), {
|
||||
#{$this} {
|
||||
--v-icon-color: var(--v-list-item-icon-color, var(--theme--foreground-subdued));
|
||||
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
margin-block: 4px;
|
||||
|
||||
&:not(:only-child) {
|
||||
&:first-child {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -177,20 +177,18 @@ function onClick(event: PointerEvent) {
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex: 1 1 100%;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: none;
|
||||
max-width: none;
|
||||
min-height: var(--v-list-item-min-height, 32px);
|
||||
max-height: auto;
|
||||
inline-size: 100%;
|
||||
min-inline-size: 0;
|
||||
max-inline-size: none;
|
||||
min-block-size: var(--v-list-item-min-height, 32px);
|
||||
max-block-size: none;
|
||||
margin: var(--v-list-item-margin, 2px 0);
|
||||
padding: var(--v-list-item-padding, 0 8px 0 calc(8px + var(--v-list-item-indent, 0px)));
|
||||
overflow: hidden;
|
||||
color: var(--v-list-item-color, var(--v-list-color, var(--theme--foreground)));
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
border-radius: var(--v-list-item-border-radius, var(--theme--border-radius));
|
||||
background-color: var(--v-list-item-background-color, var(--v-list-background-color, transparent));
|
||||
@@ -199,10 +197,10 @@ function onClick(event: PointerEvent) {
|
||||
&::after {
|
||||
/* Borders normally render outside the element, this is a way of showing it as inner */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 4px);
|
||||
height: calc(100% - 4px);
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
inline-size: calc(100% - 4px);
|
||||
block-size: calc(100% - 4px);
|
||||
border: var(--theme--border-width) dashed var(--theme--form--field--input--border-color);
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
@@ -283,7 +281,7 @@ function onClick(event: PointerEvent) {
|
||||
);
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: var(--theme--form--field--input--height);
|
||||
block-size: var(--theme--form--field--input--height);
|
||||
margin: 0;
|
||||
background-color: var(
|
||||
--v-list-item-background-color,
|
||||
@@ -329,12 +327,12 @@ function onClick(event: PointerEvent) {
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-top: var(--v-list-item-margin, 8px);
|
||||
margin-block-start: var(--v-list-item-margin, 8px);
|
||||
}
|
||||
|
||||
&.grow {
|
||||
height: auto;
|
||||
min-height: var(--theme--form--field--input--height);
|
||||
block-size: auto;
|
||||
min-block-size: var(--theme--form--field--input--height);
|
||||
}
|
||||
|
||||
&.dense {
|
||||
@@ -342,7 +340,7 @@ function onClick(event: PointerEvent) {
|
||||
padding: calc(var(--theme--form--field--input--padding) / 4) calc(var(--theme--form--field--input--padding) / 2);
|
||||
|
||||
& + & {
|
||||
margin-top: var(--v-list-item-margin, 4px);
|
||||
margin-block-start: var(--v-list-item-margin, 4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -357,16 +355,15 @@ function onClick(event: PointerEvent) {
|
||||
padding: 0 8px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-block: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,10 +77,10 @@ useGroupableParent(
|
||||
.v-list {
|
||||
position: static;
|
||||
display: block;
|
||||
min-width: var(--v-list-min-width, 220px);
|
||||
max-width: var(--v-list-max-width, none);
|
||||
min-height: var(--v-list-min-height, none);
|
||||
max-height: var(--v-list-max-height, none);
|
||||
min-inline-size: var(--v-list-min-width, 220px);
|
||||
max-inline-size: var(--v-list-max-width, none);
|
||||
min-block-size: var(--v-list-min-height, none);
|
||||
max-block-size: var(--v-list-max-height, none);
|
||||
padding: var(--v-list-padding, 4px 0);
|
||||
overflow: auto;
|
||||
color: var(--v-list-color, var(--theme--foreground-accent));
|
||||
@@ -94,7 +94,7 @@ useGroupableParent(
|
||||
}
|
||||
|
||||
:slotted(.v-divider) {
|
||||
max-width: calc(100% - 16px);
|
||||
max-inline-size: calc(100% - 16px);
|
||||
margin: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -498,9 +498,9 @@ function usePopper(
|
||||
|
||||
.v-menu-popper {
|
||||
position: fixed;
|
||||
left: -999px;
|
||||
inset-inline-start: -999px;
|
||||
z-index: 600;
|
||||
min-width: 100px;
|
||||
min-inline-size: 100px;
|
||||
transform: translateY(2px);
|
||||
pointer-events: none;
|
||||
|
||||
@@ -518,21 +518,19 @@ function usePopper(
|
||||
.arrow-triangle::before,
|
||||
.arrow-triangle::after {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
inline-size: 10px;
|
||||
block-size: 10px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
z-index: 1;
|
||||
|
||||
.arrow-triangle {
|
||||
overflow-x: visible;
|
||||
overflow-y: clip;
|
||||
overflow: visible clip;
|
||||
|
||||
[data-placement^='left'] &,
|
||||
[data-placement^='right'] & {
|
||||
overflow-x: clip;
|
||||
overflow-y: visible;
|
||||
overflow: clip visible;
|
||||
}
|
||||
|
||||
&::before,
|
||||
@@ -560,54 +558,53 @@ function usePopper(
|
||||
}
|
||||
|
||||
[data-placement^='top'] .arrow {
|
||||
bottom: -10px;
|
||||
inset-block-end: -10px;
|
||||
|
||||
.arrow-triangle {
|
||||
&::before,
|
||||
&::after {
|
||||
bottom: 7px;
|
||||
inset-block-end: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-placement^='bottom'] .arrow {
|
||||
top: -10px;
|
||||
inset-block-start: -10px;
|
||||
|
||||
.arrow-triangle {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 7px;
|
||||
inset-block-start: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-placement^='right'] .arrow {
|
||||
left: -10px;
|
||||
inset-inline-start: -10px;
|
||||
|
||||
.arrow-triangle {
|
||||
&::before,
|
||||
&::after {
|
||||
left: 7px;
|
||||
inset-inline-start: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-placement^='left'] .arrow {
|
||||
right: -10px;
|
||||
inset-inline-end: -10px;
|
||||
|
||||
.arrow-triangle {
|
||||
&::before,
|
||||
&::after {
|
||||
right: 7px;
|
||||
inset-inline-end: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-menu-content {
|
||||
max-height: v-bind(maxHeight);
|
||||
max-block-size: v-bind(maxHeight);
|
||||
padding: 0 4px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow: hidden auto;
|
||||
background-color: var(--theme--popover--menu--background);
|
||||
border: none;
|
||||
border-radius: var(--theme--popover--menu--border-radius);
|
||||
|
||||
@@ -58,8 +58,8 @@ const iconName = computed(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: auto;
|
||||
min-height: var(--theme--form--field--input--height);
|
||||
inline-size: auto;
|
||||
min-block-size: var(--theme--form--field--input--height);
|
||||
padding: 12px 16px;
|
||||
color: var(--v-notice-color, var(--theme--foreground));
|
||||
line-height: 22px;
|
||||
@@ -72,10 +72,10 @@ const iconName = computed(() => {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
inline-size: 4px;
|
||||
block-size: 100%;
|
||||
background-color: var(--v-notice-border-color, var(--theme--primary));
|
||||
}
|
||||
|
||||
@@ -84,7 +84,7 @@ const iconName = computed(() => {
|
||||
}
|
||||
|
||||
.v-icon.left {
|
||||
margin-right: 16px;
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
|
||||
.success {
|
||||
|
||||
@@ -39,14 +39,14 @@ function onClick(event: MouseEvent) {
|
||||
|
||||
.v-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: var(--v-overlay-z-index, 600);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
&.has-click {
|
||||
@@ -59,10 +59,10 @@ function onClick(event: MouseEvent) {
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
background-color: var(--overlay-color);
|
||||
opacity: 0;
|
||||
transition: opacity var(--slow) var(--transition);
|
||||
|
||||
@@ -165,11 +165,11 @@ function toPage(page: number) {
|
||||
}
|
||||
|
||||
.v-button:first-child {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.v-button:last-child {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
.v-button.active {
|
||||
|
||||
@@ -74,8 +74,8 @@ const circleStyle = computed(() => ({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--v-progress-circular-size, 28px);
|
||||
height: var(--v-progress-circular-size, 28px);
|
||||
inline-size: var(--v-progress-circular-size, 28px);
|
||||
block-size: var(--v-progress-circular-size, 28px);
|
||||
|
||||
&.x-small {
|
||||
--v-progress-circular-size: 12px;
|
||||
@@ -101,10 +101,10 @@ const circleStyle = computed(() => ({
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--v-progress-circular-size, 28px);
|
||||
height: var(--v-progress-circular-size, 28px);
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
inline-size: var(--v-progress-circular-size, 28px);
|
||||
block-size: var(--v-progress-circular-size, 28px);
|
||||
|
||||
&-path {
|
||||
transition: stroke-dasharray var(--v-progress-circular-transition, 400ms) ease-in-out;
|
||||
|
||||
@@ -60,7 +60,7 @@ const color = computed(() => {
|
||||
<div
|
||||
class="inner"
|
||||
:style="{
|
||||
width: value + '%',
|
||||
inlineSize: value + '%',
|
||||
}"
|
||||
/>
|
||||
<slot :value="value" />
|
||||
@@ -83,18 +83,18 @@ const color = computed(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: var(--v-progress-linear-height, 4px);
|
||||
inline-size: 100%;
|
||||
block-size: var(--v-progress-linear-height, 4px);
|
||||
overflow: hidden;
|
||||
background-color: var(--v-progress-linear-background-color, var(--theme--form--field--input--border-color));
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
block-size: 100%;
|
||||
background-color: var(--v-progress-linear-color, var(--theme--foreground));
|
||||
transition: width 200ms ease-in-out;
|
||||
transition: inline-size 200ms ease-in-out;
|
||||
}
|
||||
|
||||
&.absolute {
|
||||
@@ -102,7 +102,7 @@ const color = computed(() => {
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
@@ -111,7 +111,7 @@ const color = computed(() => {
|
||||
|
||||
&.indeterminate .inner {
|
||||
position: relative;
|
||||
width: 100% !important;
|
||||
inline-size: 100% !important;
|
||||
transform-origin: left;
|
||||
animation: indeterminate 2s infinite;
|
||||
will-change: transform;
|
||||
@@ -123,7 +123,7 @@ const color = computed(() => {
|
||||
}
|
||||
|
||||
&.top {
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
}
|
||||
|
||||
&.colorful {
|
||||
|
||||
@@ -73,14 +73,14 @@ function emitValue(): void {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
appearance: none;
|
||||
|
||||
.label:not(:empty) {
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
|
||||
@include mixins.no-wrap;
|
||||
}
|
||||
@@ -103,18 +103,18 @@ function emitValue(): void {
|
||||
|
||||
&.block {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: var(--theme--form--field--input--height);
|
||||
inline-size: 100%;
|
||||
block-size: var(--theme--form--field--input--height);
|
||||
padding: calc(14px - 2 * var(--theme--border-width));
|
||||
border: var(--theme--border-width) solid var(--theme--form--field--input--background-subdued);
|
||||
border-radius: var(--theme--border-radius);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
background-color: var(--theme--form--field--input--background-subdued);
|
||||
border-radius: var(--theme--border-radius);
|
||||
content: '';
|
||||
|
||||
@@ -76,7 +76,7 @@ watch(
|
||||
|
||||
const finalWidth = width > maxWidth ? maxWidth : width;
|
||||
|
||||
target.style.width = `${finalWidth}px`;
|
||||
target.style.inlineSize = `${finalWidth}px`;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
@@ -183,27 +183,26 @@ function onPointerUp() {
|
||||
<style lang="scss" scoped>
|
||||
.resize-wrapper {
|
||||
position: relative;
|
||||
max-height: 100%;
|
||||
max-block-size: 100%;
|
||||
|
||||
&.transition {
|
||||
:slotted(:first-child) {
|
||||
transition: width var(--slow) var(--transition);
|
||||
transition: inline-size var(--slow) var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
.grab-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
inset-block: 0;
|
||||
inset-inline-end: 0;
|
||||
inline-size: 4px;
|
||||
z-index: 10;
|
||||
background-color: var(--theme--primary);
|
||||
cursor: ew-resize;
|
||||
opacity: 0;
|
||||
transform: translate(50%, 0);
|
||||
transition: opacity var(--fast) var(--transition);
|
||||
transition-delay: 0;
|
||||
transition-delay: 0s;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
@@ -225,10 +224,8 @@ function onPointerUp() {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 1px;
|
||||
bottom: 0;
|
||||
left: 1px;
|
||||
inset-block: 0;
|
||||
inset-inline: 1px;
|
||||
background-color: var(--theme--border-color);
|
||||
transition: background-color var(--fast) var(--transition);
|
||||
}
|
||||
|
||||
@@ -77,11 +77,10 @@ const isActive = computed(() => {
|
||||
}
|
||||
|
||||
.item-text-margin {
|
||||
margin-left: 32px;
|
||||
margin-inline-start: 32px;
|
||||
}
|
||||
|
||||
.color-dot {
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
margin-inline: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -452,8 +452,8 @@ function useDisplayValue() {
|
||||
}
|
||||
|
||||
.inline-display {
|
||||
width: max-content;
|
||||
padding-right: 18px;
|
||||
inline-size: max-content;
|
||||
padding-inline-end: 18px;
|
||||
|
||||
&:not(.disabled) {
|
||||
cursor: pointer;
|
||||
@@ -462,7 +462,7 @@ function useDisplayValue() {
|
||||
|
||||
.inline-display.label {
|
||||
padding: 4px 8px;
|
||||
padding-right: 26px;
|
||||
padding-inline-end: 26px;
|
||||
color: var(--theme--foreground-subdued);
|
||||
background-color: var(--theme--form--field--input--background-subdued);
|
||||
border-radius: var(--theme--border-radius);
|
||||
@@ -483,7 +483,6 @@ function useDisplayValue() {
|
||||
}
|
||||
|
||||
.color-dot {
|
||||
margin-left: 7px;
|
||||
margin-right: 7px;
|
||||
margin-inline: 7px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,12 +21,12 @@
|
||||
*/
|
||||
|
||||
.v-sheet {
|
||||
width: var(--v-sheet-width, auto);
|
||||
min-width: var(--v-sheet-min-width, none);
|
||||
max-width: var(--v-sheet-max-width, none);
|
||||
height: var(--v-sheet-height, auto);
|
||||
min-height: var(--v-sheet-min-height, var(--theme--form--field--input--height));
|
||||
max-height: var(--v-sheet-max-height, none);
|
||||
inline-size: var(--v-sheet-width, auto);
|
||||
min-inline-size: var(--v-sheet-min-width, none);
|
||||
max-inline-size: var(--v-sheet-max-width, none);
|
||||
block-size: var(--v-sheet-height, auto);
|
||||
min-block-size: var(--v-sheet-min-height, var(--theme--form--field--input--height));
|
||||
max-block-size: var(--v-sheet-max-height, none);
|
||||
padding: var(--v-sheet-padding, 8px);
|
||||
overflow: auto;
|
||||
background-color: var(--v-sheet-background-color, var(--theme--form--field--input--background-subdued));
|
||||
|
||||
@@ -40,11 +40,10 @@ withDefaults(defineProps<Props>(), {
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
background: linear-gradient(90deg, transparent, var(--theme--background), transparent);
|
||||
transform: translateX(-100%);
|
||||
opacity: 0.5;
|
||||
@@ -61,8 +60,8 @@ withDefaults(defineProps<Props>(), {
|
||||
|
||||
.input,
|
||||
.input-tall {
|
||||
width: 100%;
|
||||
height: var(--theme--form--field--input--height);
|
||||
inline-size: 100%;
|
||||
block-size: var(--theme--form--field--input--height);
|
||||
border: var(--theme--border-width) solid
|
||||
var(--v-skeleton-loader-background-color, var(--theme--form--field--input--background-subdued));
|
||||
border-radius: var(--theme--border-radius);
|
||||
@@ -71,36 +70,36 @@ withDefaults(defineProps<Props>(), {
|
||||
}
|
||||
|
||||
.input-tall {
|
||||
height: var(--input-height-tall);
|
||||
block-size: var(--input-height-tall);
|
||||
}
|
||||
|
||||
.block-list-item {
|
||||
width: 100%;
|
||||
height: var(--theme--form--field--input--height);
|
||||
inline-size: 100%;
|
||||
block-size: var(--theme--form--field--input--height);
|
||||
border-radius: var(--theme--border-radius);
|
||||
|
||||
@include loader;
|
||||
|
||||
& + & {
|
||||
margin-top: 8px;
|
||||
margin-block-start: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-list-item-dense {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
inline-size: 100%;
|
||||
block-size: 44px;
|
||||
border-radius: var(--theme--border-radius);
|
||||
|
||||
@include loader;
|
||||
|
||||
& + & {
|
||||
margin-top: 4px;
|
||||
margin-block-start: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
flex-grow: 1;
|
||||
height: 12px;
|
||||
block-size: 12px;
|
||||
border-radius: 6px;
|
||||
|
||||
@include loader;
|
||||
@@ -109,14 +108,14 @@ withDefaults(defineProps<Props>(), {
|
||||
.list-item-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
inline-size: 100%;
|
||||
block-size: 46px;
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 12px;
|
||||
inline-size: 24px;
|
||||
block-size: 24px;
|
||||
margin-inline-end: 12px;
|
||||
border-radius: 50%;
|
||||
|
||||
@include loader;
|
||||
@@ -124,7 +123,7 @@ withDefaults(defineProps<Props>(), {
|
||||
|
||||
.text {
|
||||
flex-grow: 1;
|
||||
height: 12px;
|
||||
block-size: 12px;
|
||||
border-radius: 6px;
|
||||
|
||||
@include loader;
|
||||
|
||||
@@ -101,12 +101,12 @@ function onInput(event: Event) {
|
||||
align-items: center;
|
||||
|
||||
.prepend {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
inset-block-start: -3px;
|
||||
flex-grow: 1;
|
||||
|
||||
&.disabled {
|
||||
@@ -115,12 +115,12 @@ function onInput(event: Event) {
|
||||
}
|
||||
|
||||
&.thumb-label-visible {
|
||||
margin-bottom: 30px;
|
||||
margin-block-end: 30px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
inline-size: 100%;
|
||||
block-size: 4px;
|
||||
padding: 8px 0;
|
||||
background-color: var(--theme--background);
|
||||
background-image: var(--v-slider-track-background-image);
|
||||
@@ -129,7 +129,7 @@ function onInput(event: Event) {
|
||||
appearance: none;
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
height: 4px;
|
||||
block-size: 4px;
|
||||
background: var(--v-slider-color, var(--theme--form--field--input--border-color));
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
@@ -137,7 +137,7 @@ function onInput(event: Event) {
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
height: 4px;
|
||||
block-size: 4px;
|
||||
background: var(--v-slider-color, var(--theme--form--field--input--border-color));
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
@@ -147,9 +147,9 @@ function onInput(event: Event) {
|
||||
&::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-top: -2px;
|
||||
inline-size: 8px;
|
||||
block-size: 8px;
|
||||
margin-block-start: -2px;
|
||||
background: var(--theme--background);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
@@ -162,9 +162,9 @@ function onInput(event: Event) {
|
||||
&::-moz-range-thumb {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-top: -2px;
|
||||
inline-size: 8px;
|
||||
block-size: 8px;
|
||||
margin-block-start: -2px;
|
||||
background: var(--v-slider-thumb-color, var(--theme--primary));
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
@@ -177,12 +177,11 @@ function onInput(event: Event) {
|
||||
|
||||
.fill {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
inset-block-start: 50%;
|
||||
inset-inline: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
inline-size: 100%;
|
||||
block-size: 4px;
|
||||
background-color: var(--v-slider-fill-color, var(--theme--primary));
|
||||
border-radius: 4px;
|
||||
transform: translateY(-5px) scaleX(calc(var(--_v-slider-percentage) / 100));
|
||||
@@ -192,14 +191,14 @@ function onInput(event: Event) {
|
||||
|
||||
.ticks {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 0;
|
||||
inset-block-start: 14px;
|
||||
inset-inline-start: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
inline-size: 100%;
|
||||
block-size: 4px;
|
||||
padding: 0 7px;
|
||||
opacity: 0;
|
||||
transition: opacity var(--fast) var(--transition);
|
||||
@@ -207,8 +206,8 @@ function onInput(event: Event) {
|
||||
|
||||
.tick {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
inline-size: 4px;
|
||||
block-size: 4px;
|
||||
background-color: var(--v-slider-color, var(--theme--form--field--input--border-color));
|
||||
border-radius: 50%;
|
||||
}
|
||||
@@ -216,9 +215,9 @@ function onInput(event: Event) {
|
||||
|
||||
.thumb-label-wrapper {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 7px;
|
||||
width: calc(100% - 14px);
|
||||
inset-block-start: 100%;
|
||||
inset-inline-start: 7px;
|
||||
inline-size: calc(100% - 14px);
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -226,9 +225,9 @@ function onInput(event: Event) {
|
||||
.thumb-label {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: calc(var(--_v-slider-percentage) * 1%);
|
||||
width: auto;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: calc(var(--_v-slider-percentage) * 1%);
|
||||
inline-size: auto;
|
||||
padding: 2px 6px;
|
||||
color: var(--foreground-inverted);
|
||||
font-weight: 600;
|
||||
@@ -246,20 +245,20 @@ function onInput(event: Event) {
|
||||
&:hover:not(.disabled),
|
||||
&:focus-within:not(.disabled) {
|
||||
input {
|
||||
height: 4px;
|
||||
block-size: 4px;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: -4px;
|
||||
inline-size: 12px;
|
||||
block-size: 12px;
|
||||
margin-block-start: -4px;
|
||||
box-shadow: 0 0 0 4px var(--v-slider-thumb-color, var(--theme--primary));
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: -4px;
|
||||
inline-size: 12px;
|
||||
block-size: 12px;
|
||||
margin-block-start: -4px;
|
||||
box-shadow: 0 0 0 4px var(--v-slider-thumb-color, var(--theme--primary));
|
||||
cursor: ew-resize;
|
||||
}
|
||||
@@ -279,7 +278,7 @@ function onInput(event: Event) {
|
||||
}
|
||||
|
||||
.append {
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -210,7 +210,7 @@ function toggleManualSort() {
|
||||
</template>
|
||||
|
||||
<template #item="{ element: header }">
|
||||
<th :class="getClassesForHeader(header)" class="cell" scope="col" :style="{ width: header.width + 'px' }">
|
||||
<th :class="getClassesForHeader(header)" class="cell" scope="col" :style="{ inlineSize: header.width + 'px' }">
|
||||
<v-menu v-if="hasHeaderContextMenuSlot" show-arrow placement="bottom-start">
|
||||
<template #activator="{ toggle }">
|
||||
<div class="content reorder-handle">
|
||||
@@ -280,12 +280,12 @@ function toggleManualSort() {
|
||||
.table-header {
|
||||
.cell {
|
||||
position: relative;
|
||||
height: 50px; /* +2px for bottom border */
|
||||
block-size: 50px; /* +2px for bottom border */
|
||||
padding: 0 12px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
background-color: var(--v-table-background-color, var(--theme--background));
|
||||
border-bottom: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
border-block-end: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
|
||||
&.select {
|
||||
--focus-ring-offset: var(--focus-ring-offset-invert);
|
||||
@@ -300,12 +300,12 @@ function toggleManualSort() {
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
color: var(--theme--foreground-accent);
|
||||
font-weight: 600;
|
||||
|
||||
.header-btn {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
@@ -330,7 +330,7 @@ function toggleManualSort() {
|
||||
justify-content: center;
|
||||
|
||||
.header-btn {
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
}
|
||||
|
||||
.name {
|
||||
@@ -352,7 +352,7 @@ function toggleManualSort() {
|
||||
position: relative;
|
||||
|
||||
.action-icon {
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
color: var(--theme--foreground-subdued);
|
||||
opacity: 0;
|
||||
transition: opacity var(--fast) var(--transition);
|
||||
@@ -384,12 +384,12 @@ function toggleManualSort() {
|
||||
|
||||
.select,
|
||||
.manual {
|
||||
padding-right: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: sticky;
|
||||
top: var(--v-table-sticky-offset-top, 0);
|
||||
inset-block-start: var(--v-table-sticky-offset-top, 0);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
@@ -398,7 +398,7 @@ function toggleManualSort() {
|
||||
|
||||
.v-icon {
|
||||
position: relative;
|
||||
left: 2px;
|
||||
inset-inline-start: 2px;
|
||||
}
|
||||
|
||||
&.sorted-manually {
|
||||
@@ -408,20 +408,20 @@ function toggleManualSort() {
|
||||
|
||||
.resize-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
inline-size: 5px;
|
||||
block-size: 100%;
|
||||
cursor: ew-resize;
|
||||
transition: opacity var(--fast) var(--transition);
|
||||
|
||||
&::after {
|
||||
position: relative;
|
||||
top: 20%;
|
||||
left: 3px;
|
||||
inset-block-start: 20%;
|
||||
inset-inline-start: 3px;
|
||||
display: block;
|
||||
width: var(--theme--border-width);
|
||||
height: 60%;
|
||||
inline-size: var(--theme--border-width);
|
||||
block-size: 60%;
|
||||
background-color: var(--theme--border-color-subdued);
|
||||
content: '';
|
||||
transition: background-color var(--fast) var(--transition);
|
||||
@@ -440,19 +440,18 @@ function toggleManualSort() {
|
||||
:deep(.header-order-ghost) {
|
||||
&::after,
|
||||
&::before {
|
||||
width: 2px;
|
||||
inline-size: 2px;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
inset-inline-end: 0;
|
||||
inset-block-start: 20%;
|
||||
block-size: 60%;
|
||||
background-color: var(--theme--primary);
|
||||
}
|
||||
|
||||
&::before {
|
||||
right: auto;
|
||||
left: 0;
|
||||
inset-inline: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -461,14 +460,14 @@ function toggleManualSort() {
|
||||
}
|
||||
|
||||
.description-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
inline-size: 8px;
|
||||
block-size: 8px;
|
||||
background-color: var(--theme--foreground-subdued);
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
border: var(--theme--background) 6px solid;
|
||||
box-sizing: content-box;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -91,7 +91,7 @@ function onKeydown(e: KeyboardEvent) {
|
||||
.table-row {
|
||||
--focus-ring-offset: var(--focus-ring-offset-invert);
|
||||
|
||||
height: v-bind('cssHeight.tableRow');
|
||||
block-size: v-bind('cssHeight.tableRow');
|
||||
|
||||
.cell {
|
||||
display: flex;
|
||||
@@ -101,7 +101,7 @@ function onKeydown(e: KeyboardEvent) {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background-color: var(--v-table-background-color, transparent);
|
||||
border-bottom: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
border-block-end: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
|
||||
&:last-child {
|
||||
padding: 0 12px;
|
||||
@@ -141,10 +141,10 @@ function onKeydown(e: KeyboardEvent) {
|
||||
}
|
||||
|
||||
:deep(.render-template) {
|
||||
height: v-bind('cssHeight.tableRow');
|
||||
block-size: v-bind('cssHeight.tableRow');
|
||||
|
||||
img {
|
||||
height: v-bind('cssHeight.renderTemplateImage');
|
||||
block-size: v-bind('cssHeight.renderTemplateImage');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -370,12 +370,12 @@ function updateSort(newSort: Sort) {
|
||||
|
||||
.v-table {
|
||||
position: relative;
|
||||
height: auto;
|
||||
block-size: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
min-width: 100%;
|
||||
min-inline-size: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -404,7 +404,7 @@ table :deep(tr) {
|
||||
|
||||
table :deep(td.align-left),
|
||||
table :deep(th.align-left) {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
@@ -416,7 +416,7 @@ table :deep(th.align-center) {
|
||||
|
||||
table :deep(td.align-right),
|
||||
table :deep(th.align-right) {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
@@ -426,7 +426,7 @@ table :deep(.loading-indicator) {
|
||||
}
|
||||
|
||||
table :deep(.loading-indicator > th) {
|
||||
margin-right: var(--content-padding);
|
||||
margin-inline-end: var(--content-padding);
|
||||
}
|
||||
|
||||
table :deep(.sortable-ghost .cell) {
|
||||
@@ -438,7 +438,7 @@ table :deep(.sortable-ghost .cell) {
|
||||
}
|
||||
|
||||
.loading .loading-indicator {
|
||||
height: auto;
|
||||
block-size: auto;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
@@ -448,9 +448,9 @@ table :deep(.sortable-ghost .cell) {
|
||||
--v-progress-linear-color: var(--theme--form--field--input--border-color-hover);
|
||||
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
inset-block-start: -2px;
|
||||
inset-inline-start: 0;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.loading .loading-indicator th {
|
||||
@@ -459,7 +459,7 @@ table :deep(.sortable-ghost .cell) {
|
||||
|
||||
.loading .loading-indicator.sticky th {
|
||||
position: sticky;
|
||||
top: 48px;
|
||||
inset-block-start: 48px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@@ -481,7 +481,7 @@ table :deep(.sortable-ghost .cell) {
|
||||
}
|
||||
|
||||
.inline table :deep(.table-row:last-of-type .cell) {
|
||||
border-bottom: none;
|
||||
border-block-end: none;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
|
||||
@@ -54,12 +54,10 @@ function update(newSelection: readonly (string | number)[]) {
|
||||
|
||||
.v-tabs.horizontal :slotted(.v-tab) {
|
||||
display: flex;
|
||||
flex-basis: 0px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
flex: 1 0 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 38px;
|
||||
block-size: 38px;
|
||||
padding: 8px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -301,9 +301,9 @@ function parseHTML(innerText?: string, isDirectInput = false) {
|
||||
<style scoped lang="scss">
|
||||
.v-template-input {
|
||||
position: relative;
|
||||
height: var(--theme--form--field--input--height);
|
||||
block-size: var(--theme--form--field--input--height);
|
||||
padding: var(--theme--form--field--input--padding);
|
||||
padding-bottom: 32px;
|
||||
padding-block-end: 32px;
|
||||
overflow: hidden;
|
||||
color: var(--theme--foreground);
|
||||
font-family: var(--theme--fonts--sans--font-family);
|
||||
@@ -320,7 +320,7 @@ function parseHTML(innerText?: string, isDirectInput = false) {
|
||||
}
|
||||
|
||||
&.multiline {
|
||||
height: var(--input-height-tall);
|
||||
block-size: var(--input-height-tall);
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@@ -335,7 +335,7 @@ function parseHTML(innerText?: string, isDirectInput = false) {
|
||||
|
||||
:deep(.preview) {
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
padding: 2px 4px;
|
||||
color: var(--theme--primary);
|
||||
font-size: 0;
|
||||
|
||||
@@ -12,7 +12,7 @@ interface Props {
|
||||
modelValue?: string;
|
||||
/** If the input is empty, return `null` instead of `''` */
|
||||
nullable?: boolean;
|
||||
/** Renders the textarea at regular input size, and expands to max-height on focus */
|
||||
/** Renders the textarea at regular input size, and expands to max-block-size on focus */
|
||||
expandOnFocus?: boolean;
|
||||
/** Text to show when no input is entered */
|
||||
placeholder?: string;
|
||||
@@ -93,8 +93,8 @@ function trimIfEnabled() {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
height: var(--input-height-tall);
|
||||
inline-size: max-content;
|
||||
block-size: var(--input-height-tall);
|
||||
background-color: var(--theme--form--field--input--background);
|
||||
border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
|
||||
border-radius: var(--theme--border-radius);
|
||||
@@ -108,8 +108,8 @@ function trimIfEnabled() {
|
||||
}
|
||||
|
||||
&.expand-on-focus {
|
||||
height: var(--theme--form--field--input--height);
|
||||
transition: height var(--medium) var(--transition);
|
||||
block-size: var(--theme--form--field--input--height);
|
||||
transition: block-size var(--medium) var(--transition);
|
||||
|
||||
.append,
|
||||
.prepend {
|
||||
@@ -121,7 +121,7 @@ function trimIfEnabled() {
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&.has-content {
|
||||
height: var(--v-textarea-max-height);
|
||||
block-size: var(--v-textarea-max-height);
|
||||
|
||||
.append,
|
||||
.prepend {
|
||||
@@ -132,7 +132,7 @@ function trimIfEnabled() {
|
||||
}
|
||||
|
||||
&.full-width {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
@@ -150,8 +150,8 @@ function trimIfEnabled() {
|
||||
position: relative;
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
height: var(--theme--form--field--input--height);
|
||||
inline-size: 100%;
|
||||
block-size: var(--theme--form--field--input--height);
|
||||
padding: var(--theme--form--field--input--padding);
|
||||
color: var(--theme--foreground);
|
||||
font-family: var(--v-textarea-font-family, var(--theme--fonts--sans--font-family));
|
||||
|
||||
@@ -406,7 +406,7 @@ defineExpose({ abort });
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: var(--input-height-tall);
|
||||
min-block-size: var(--input-height-tall);
|
||||
padding: 32px;
|
||||
color: var(--theme--foreground-subdued);
|
||||
text-align: center;
|
||||
@@ -427,24 +427,24 @@ defineExpose({ abort });
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 18px;
|
||||
margin-block-end: 18px;
|
||||
|
||||
.v-button {
|
||||
margin-right: 12px;
|
||||
margin-inline-end: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
appearance: none;
|
||||
@@ -461,7 +461,7 @@ defineExpose({ abort });
|
||||
|
||||
.upload-icon {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 12px;
|
||||
margin-block-end: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -477,9 +477,9 @@ defineExpose({ abort });
|
||||
|
||||
.v-progress-linear {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 32px;
|
||||
width: calc(100% - 64px);
|
||||
inset-block-end: 30px;
|
||||
inset-inline-start: 32px;
|
||||
inline-size: calc(100% - 64px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -379,8 +379,8 @@ function useDragDrop() {
|
||||
|
||||
.resize-details {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 0;
|
||||
z-index: 2;
|
||||
padding: 2px 11.5px 11.5px 2px;
|
||||
color: var(--theme--foreground-subdued);
|
||||
@@ -389,10 +389,10 @@ function useDragDrop() {
|
||||
font-family: var(--theme--fonts--monospace--font-family);
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
border-top-right-radius: var(--theme--border-radius);
|
||||
border-bottom-right-radius: var(--theme--border-radius);
|
||||
border-top-left-radius: var(--theme--border-radius);
|
||||
text-align: end;
|
||||
border-start-end-radius: var(--theme--border-radius);
|
||||
border-end-end-radius: var(--theme--border-radius);
|
||||
border-start-start-radius: var(--theme--border-radius);
|
||||
background-color: var(--theme--background);
|
||||
opacity: 0;
|
||||
transition:
|
||||
@@ -405,33 +405,33 @@ function useDragDrop() {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tile-content.has-header {
|
||||
height: calc(100% - 42px);
|
||||
block-size: calc(100% - 42px);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 42px;
|
||||
block-size: 42px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 0 12px;
|
||||
border-top: 2px solid var(--theme--border-color-subdued);
|
||||
margin-top: auto;
|
||||
padding-top: 8px;
|
||||
border-block-start: 2px solid var(--theme--border-color-subdued);
|
||||
margin-block-start: auto;
|
||||
padding-block-start: 8px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
--v-icon-color: var(--theme--foreground-subdued);
|
||||
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
.name {
|
||||
@@ -461,16 +461,16 @@ function useDragDrop() {
|
||||
|
||||
.edit-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
border-top-right-radius: var(--theme--border-radius);
|
||||
border-bottom-right-radius: var(--theme--border-radius);
|
||||
border-bottom-left-radius: var(--theme--border-radius);
|
||||
border-start-end-radius: var(--theme--border-radius);
|
||||
border-end-end-radius: var(--theme--border-radius);
|
||||
border-end-start-radius: var(--theme--border-radius);
|
||||
background-color: var(--theme--background);
|
||||
}
|
||||
|
||||
@@ -480,80 +480,80 @@ function useDragDrop() {
|
||||
}
|
||||
|
||||
.resize-handlers .top {
|
||||
top: -3px;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
inset-block-start: -3px;
|
||||
inline-size: 100%;
|
||||
block-size: 10px;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
.resize-handlers .right {
|
||||
top: 0;
|
||||
right: -3px;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: -3px;
|
||||
inline-size: 10px;
|
||||
block-size: 100%;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.resize-handlers .bottom {
|
||||
bottom: -3px;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
inset-block-end: -3px;
|
||||
inline-size: 100%;
|
||||
block-size: 10px;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
.resize-handlers .left {
|
||||
top: 0;
|
||||
left: -3px;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: -3px;
|
||||
inline-size: 10px;
|
||||
block-size: 100%;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.resize-handlers .top-left {
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
inset-block-start: -3px;
|
||||
inset-inline-start: -3px;
|
||||
inline-size: 14px;
|
||||
block-size: 14px;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
.resize-handlers .top-right {
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
inset-block-start: -3px;
|
||||
inset-inline-end: -3px;
|
||||
inline-size: 14px;
|
||||
block-size: 14px;
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
|
||||
.resize-handlers .bottom-right {
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
inset-inline-end: -3px;
|
||||
inset-block-end: -3px;
|
||||
inline-size: 14px;
|
||||
block-size: 14px;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
.resize-handlers .bottom-left {
|
||||
bottom: -3px;
|
||||
left: -3px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
inset-block-end: -3px;
|
||||
inset-inline-start: -3px;
|
||||
inline-size: 14px;
|
||||
block-size: 14px;
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
|
||||
.br-tl {
|
||||
border-top-left-radius: var(--theme--border-radius);
|
||||
border-start-start-radius: var(--theme--border-radius);
|
||||
}
|
||||
|
||||
.br-tr {
|
||||
border-top-right-radius: var(--theme--border-radius);
|
||||
border-start-end-radius: var(--theme--border-radius);
|
||||
}
|
||||
|
||||
.br-br {
|
||||
border-bottom-right-radius: var(--theme--border-radius);
|
||||
border-end-end-radius: var(--theme--border-radius);
|
||||
}
|
||||
|
||||
.br-bl {
|
||||
border-bottom-left-radius: var(--theme--border-radius);
|
||||
border-end-start-radius: var(--theme--border-radius);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -96,14 +96,14 @@ const workspaceBoxSize = computed(() => {
|
||||
<div
|
||||
class="v-workspace"
|
||||
:class="{ editing: editMode }"
|
||||
:style="{ width: workspaceBoxSize.width + 'px', height: workspaceBoxSize.height + 'px' }"
|
||||
:style="{ inlineSize: workspaceBoxSize.width + 'px', blockSize: workspaceBoxSize.height + 'px' }"
|
||||
>
|
||||
<div
|
||||
class="workspace"
|
||||
:style="{
|
||||
transform: `scale(${zoomScale})`,
|
||||
width: workspaceSize.width + 'px',
|
||||
height: workspaceSize.height + 'px',
|
||||
inlineSize: workspaceSize.width + 'px',
|
||||
blockSize: workspaceSize.height + 'px',
|
||||
}"
|
||||
>
|
||||
<template v-if="!$slots.tile">
|
||||
@@ -139,12 +139,12 @@ const workspaceBoxSize = computed(() => {
|
||||
|
||||
.workspace {
|
||||
position: absolute;
|
||||
left: var(--content-padding);
|
||||
inset-inline-start: var(--content-padding);
|
||||
display: grid;
|
||||
grid-template-rows: repeat(auto-fill, 20px);
|
||||
grid-template-columns: repeat(auto-fill, 20px);
|
||||
min-width: calc(100%);
|
||||
min-height: calc(100% - 120px);
|
||||
min-inline-size: calc(100%);
|
||||
min-block-size: calc(100% - 120px);
|
||||
transform: scale(1);
|
||||
transform-origin: top left;
|
||||
|
||||
@@ -159,11 +159,11 @@ const workspaceBoxSize = computed(() => {
|
||||
|
||||
.workspace::before {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
inset-block-start: -4px;
|
||||
inset-inline-start: -4px;
|
||||
display: block;
|
||||
width: calc(100% + 8px);
|
||||
height: calc(100% + 8px);
|
||||
inline-size: calc(100% + 8px);
|
||||
block-size: calc(100% + 8px);
|
||||
background-image: radial-gradient(var(--theme--form--field--input--border-color) 10%, transparent 10%);
|
||||
background-position: -6px -6px;
|
||||
background-size: 20px 20px;
|
||||
|
||||
@@ -34,7 +34,7 @@ function updateWidth(el: AutoWidthElement) {
|
||||
const value = el.value || el.placeholder;
|
||||
el.shadow.textContent = value;
|
||||
|
||||
el.style.width = `${el.shadow.scrollWidth}px`;
|
||||
el.style.inlineSize = `${el.shadow.scrollWidth}px`;
|
||||
}
|
||||
|
||||
function copyStyles(el: AutoWidthElement) {
|
||||
@@ -42,10 +42,10 @@ function copyStyles(el: AutoWidthElement) {
|
||||
|
||||
Object.assign(el.shadow.style, {
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
insetBlockStart: '0',
|
||||
insetInlineStart: '0',
|
||||
visibility: 'hidden',
|
||||
height: '0',
|
||||
blockSize: '0',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'pre',
|
||||
fontSize: styles.fontSize,
|
||||
@@ -54,8 +54,8 @@ function copyStyles(el: AutoWidthElement) {
|
||||
fontStyle: styles.fontStyle,
|
||||
letterSpacing: styles.letterSpacing,
|
||||
textTransform: styles.textTransform,
|
||||
paddingRight: `calc(${styles.paddingRight} + ${styles.borderRightWidth})`,
|
||||
paddingLeft: `calc(${styles.paddingLeft} + ${styles.borderLeftWidth})`,
|
||||
paddingInlineEnd: `calc(${styles.paddingInlineEnd} + ${styles.borderInlineEndWidth})`,
|
||||
paddingInlineStart: `calc(${styles.paddingInlineStart} + ${styles.borderInlineStartWidth})`,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -50,7 +50,7 @@ const styles = computed(() => {
|
||||
align-items: center;
|
||||
|
||||
.v-icon {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -47,8 +47,8 @@ const addBorder = computed(() => {
|
||||
background-color: v-bind(color);
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
inline-size: 10px;
|
||||
block-size: 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
&.with-border {
|
||||
|
||||
@@ -53,7 +53,7 @@ const imageThumbnail = computed(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
img {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: var(--theme--border-radius);
|
||||
aspect-ratio: 1;
|
||||
@@ -66,7 +66,7 @@ img {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
overflow: hidden;
|
||||
background-color: var(--theme--background-normal);
|
||||
border-radius: var(--theme--border-radius);
|
||||
|
||||
@@ -193,7 +193,7 @@ function matchNumber(left: number, right: number, operator: string) {
|
||||
|
||||
&.has-background,
|
||||
&.has-border {
|
||||
height: 28px;
|
||||
block-size: 28px;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
|
||||
@@ -37,8 +37,8 @@ const src = computed(() => {
|
||||
<style lang="scss" scoped>
|
||||
img {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
inline-size: auto;
|
||||
block-size: 100%;
|
||||
vertical-align: -30%;
|
||||
border-radius: var(--theme--border-radius);
|
||||
|
||||
|
||||
@@ -111,7 +111,7 @@ const items = computed(() => {
|
||||
}
|
||||
|
||||
.v-chip + .v-chip {
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
|
||||
.v-icon {
|
||||
@@ -121,6 +121,6 @@ const items = computed(() => {
|
||||
|
||||
.inline-dot {
|
||||
padding: 0 4px;
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,7 +26,7 @@ const starCount = computed(() => {
|
||||
});
|
||||
|
||||
const ratingPercentage = computed(() => ({
|
||||
width: (Number(props.value) / starCount.value) * 100 + '%',
|
||||
inlineSize: (Number(props.value) / starCount.value) * 100 + '%',
|
||||
}));
|
||||
</script>
|
||||
|
||||
@@ -57,29 +57,29 @@ const ratingPercentage = computed(() => ({
|
||||
border-radius: var(--theme--border-radius);
|
||||
|
||||
.v-icon {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.detailed {
|
||||
position: relative;
|
||||
width: min-content;
|
||||
inline-size: min-content;
|
||||
display: inline-flex;
|
||||
height: var(--v-icon-size, 24px);
|
||||
block-size: var(--v-icon-size, 24px);
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
width: 0%;
|
||||
inline-size: 0%;
|
||||
overflow: hidden;
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.inactive {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
color: var(--theme--background-normal);
|
||||
|
||||
@@ -110,16 +110,17 @@ function getLinkForItem(item: any) {
|
||||
<style lang="scss" scoped>
|
||||
.toggle {
|
||||
position: relative;
|
||||
|
||||
--toggle-px: 6px;
|
||||
--toggle-py: 4px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--toggle-py));
|
||||
left: calc(-1 * var(--toggle-px));
|
||||
inset-block-start: calc(-1 * var(--toggle-py));
|
||||
inset-inline-start: calc(-1 * var(--toggle-px));
|
||||
z-index: 1;
|
||||
width: calc(100% + var(--toggle-px) * 2);
|
||||
height: calc(100% + var(--toggle-py) * 2);
|
||||
inline-size: calc(100% + var(--toggle-px) * 2);
|
||||
block-size: calc(100% + var(--toggle-py) * 2);
|
||||
background-color: var(--theme--background-normal);
|
||||
border-radius: var(--theme--border-radius);
|
||||
opacity: 0;
|
||||
@@ -156,7 +157,7 @@ function getLinkForItem(item: any) {
|
||||
|
||||
.links {
|
||||
.v-list-item-content {
|
||||
height: var(--v-list-item-min-height, 32px);
|
||||
block-size: var(--v-list-item-min-height, 32px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -131,12 +131,12 @@ const translations = computed(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-list {
|
||||
width: 300px;
|
||||
inline-size: 300px;
|
||||
}
|
||||
|
||||
.display-translations {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
max-inline-size: 100%;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
@@ -167,26 +167,25 @@ const translations = computed(() => {
|
||||
}
|
||||
|
||||
.v-icon {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
.v-progress-linear {
|
||||
flex: 1;
|
||||
width: unset;
|
||||
max-width: 100px;
|
||||
inline-size: unset;
|
||||
max-inline-size: 100px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item-content {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px;
|
||||
padding-block: 4px 2px;
|
||||
}
|
||||
|
||||
.v-list-item:not(:first-child) {
|
||||
.header {
|
||||
padding-top: 8px;
|
||||
border-top: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
padding-block-start: 8px;
|
||||
border-block-start: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -52,13 +52,13 @@ const src = computed(() => {
|
||||
.user {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
vertical-align: middle;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
inline-size: auto;
|
||||
block-size: 100%;
|
||||
vertical-align: -67%;
|
||||
border-radius: 4px;
|
||||
|
||||
@@ -69,7 +69,7 @@ const src = computed(() => {
|
||||
|
||||
&.both {
|
||||
img {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -134,8 +134,8 @@ const removeField = (field: string) => {
|
||||
.toggle {
|
||||
color: var(--theme--primary);
|
||||
font-weight: 600;
|
||||
margin-left: 10px;
|
||||
margin-top: 6px;
|
||||
margin-inline-start: 10px;
|
||||
margin-block-start: 6px;
|
||||
|
||||
.v-icon {
|
||||
position: absolute;
|
||||
|
||||
@@ -229,12 +229,12 @@ defineExpose({
|
||||
&.timestamp,
|
||||
&.time,
|
||||
&.dateTime {
|
||||
min-width: 250px;
|
||||
min-inline-size: 250px;
|
||||
}
|
||||
|
||||
&.geometry,
|
||||
&.json {
|
||||
width: 500px;
|
||||
inline-size: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -244,7 +244,7 @@ input {
|
||||
line-height: 1em;
|
||||
background-color: var(--theme--form--field--input--background);
|
||||
border: none;
|
||||
max-width: 40ch;
|
||||
max-inline-size: 40ch;
|
||||
box-shadow: 0 4px 0 -2px v-bind(inputBorderColor);
|
||||
|
||||
&::placeholder {
|
||||
@@ -256,10 +256,10 @@ input {
|
||||
|
||||
.dialog {
|
||||
position: relative;
|
||||
min-width: 800px;
|
||||
min-inline-size: 800px;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
min-width: 400px;
|
||||
min-inline-size: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -329,15 +329,15 @@ function useVariableInput() {
|
||||
--v-icon-color: var(--theme--foreground-subdued);
|
||||
--v-icon-color-hover: var(--theme--foreground);
|
||||
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
|
||||
.comparator + & {
|
||||
margin-left: -4px;
|
||||
margin-inline-start: -4px;
|
||||
}
|
||||
|
||||
&.v-icon {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
inline-size: 24px !important;
|
||||
block-size: 24px !important;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -360,10 +360,10 @@ function useVariableInput() {
|
||||
.variable-input-braces {
|
||||
font-family: var(--theme--fonts--monospace--font-family);
|
||||
color: var(--theme--form--field--input--foreground-subdued);
|
||||
margin-left: 2px;
|
||||
margin-inline-start: 2px;
|
||||
|
||||
.variable-input + & {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -372,8 +372,7 @@ function useVariableInput() {
|
||||
align-items: center;
|
||||
|
||||
.v-icon {
|
||||
margin-right: 8px;
|
||||
margin-left: 12px;
|
||||
margin-inline: 12px 8px;
|
||||
color: var(--theme--form--field--input--foreground-subdued);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -387,7 +386,7 @@ function useVariableInput() {
|
||||
display: flex;
|
||||
|
||||
.value:not(:last-child)::after {
|
||||
margin-right: 6px;
|
||||
margin-inline-end: 6px;
|
||||
content: ',';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -400,11 +400,11 @@ function isExistingField(node: Record<string, any>): boolean {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
margin-right: 18px;
|
||||
margin-bottom: 8px;
|
||||
inline-size: fit-content;
|
||||
margin-inline-end: 18px;
|
||||
margin-block-end: 8px;
|
||||
padding: 2px 6px;
|
||||
padding-right: 8px;
|
||||
padding-inline-end: 8px;
|
||||
background-color: var(--theme--form--field--input--background);
|
||||
border: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
border-radius: 100px;
|
||||
@@ -414,7 +414,7 @@ function isExistingField(node: Record<string, any>): boolean {
|
||||
color: var(--theme--form--field--input--foreground-subdued);
|
||||
|
||||
.key {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
padding: 2px 6px;
|
||||
color: var(--theme--primary);
|
||||
background-color: var(--theme--primary-background);
|
||||
@@ -439,7 +439,7 @@ function isExistingField(node: Record<string, any>): boolean {
|
||||
}
|
||||
|
||||
:deep(.inline-display) {
|
||||
padding-right: 0px;
|
||||
padding-inline-end: 0;
|
||||
|
||||
.v-icon {
|
||||
display: none;
|
||||
@@ -448,7 +448,7 @@ function isExistingField(node: Record<string, any>): boolean {
|
||||
|
||||
.plain-name {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -468,15 +468,15 @@ function isExistingField(node: Record<string, any>): boolean {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: -4px;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: -4px;
|
||||
z-index: -1;
|
||||
width: calc(100% + 8px);
|
||||
height: 100%;
|
||||
inline-size: calc(100% + 8px);
|
||||
block-size: 100%;
|
||||
background-color: var(--theme--background-normal);
|
||||
border-radius: 6px;
|
||||
opacity: 0;
|
||||
@@ -503,9 +503,9 @@ function isExistingField(node: Record<string, any>): boolean {
|
||||
--v-icon-color-hover: var(--theme--danger);
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
padding-left: 4px;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 100%;
|
||||
padding-inline-start: 4px;
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
transition: opacity var(--fast) var(--transition);
|
||||
@@ -525,18 +525,18 @@ function isExistingField(node: Record<string, any>): boolean {
|
||||
.drag-handle {
|
||||
--v-icon-color: var(--theme--form--field--input--foreground-subdued);
|
||||
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
&.inline {
|
||||
width: auto;
|
||||
margin-right: 0;
|
||||
padding-right: 12px;
|
||||
inline-size: auto;
|
||||
margin-inline-end: 0;
|
||||
padding-inline-end: 12px;
|
||||
|
||||
.delete {
|
||||
right: 8px;
|
||||
left: unset;
|
||||
inset-inline-end: 8px;
|
||||
inset-inline-start: unset;
|
||||
background-color: var(--theme--background);
|
||||
}
|
||||
}
|
||||
@@ -544,12 +544,12 @@ function isExistingField(node: Record<string, any>): boolean {
|
||||
|
||||
.node {
|
||||
&.logic {
|
||||
padding-right: 4px;
|
||||
padding-inline-end: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.field {
|
||||
padding-right: 4px;
|
||||
padding-inline-end: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -258,22 +258,22 @@ function addKeyAsNode() {
|
||||
}
|
||||
|
||||
:deep(.group) {
|
||||
margin-left: 18px;
|
||||
padding-left: 10px;
|
||||
border-left: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
margin-inline-start: 18px;
|
||||
padding-inline-start: 10px;
|
||||
border-inline-start: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
}
|
||||
|
||||
.v-list {
|
||||
min-width: auto;
|
||||
margin: 0px 0px 10px;
|
||||
min-inline-size: auto;
|
||||
margin: 0 0 10px;
|
||||
padding: 20px 20px 12px;
|
||||
border: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
background: var(--theme--form--field--input--background);
|
||||
|
||||
& > :deep(.group) {
|
||||
margin-left: 0px;
|
||||
padding-left: 0px;
|
||||
border-left: none;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-start: 0;
|
||||
border-inline-start: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -290,9 +290,8 @@ function addKeyAsNode() {
|
||||
.v-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--theme--form--field--input--height);
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
block-size: var(--theme--form--field--input--height);
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.no-rules {
|
||||
@@ -325,8 +324,8 @@ function addKeyAsNode() {
|
||||
.add-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
inline-size: 100%;
|
||||
block-size: 30px;
|
||||
padding: 0;
|
||||
color: var(--theme--form--field--input--foreground-subdued);
|
||||
background-color: var(--theme--form--field--input--background);
|
||||
@@ -344,12 +343,10 @@ function addKeyAsNode() {
|
||||
}
|
||||
}
|
||||
.add {
|
||||
margin-left: 6px;
|
||||
margin-right: 4px;
|
||||
margin-inline: 6px 4px;
|
||||
}
|
||||
.expand_more {
|
||||
margin-left: auto;
|
||||
margin-right: 6px;
|
||||
margin-inline: auto 6px;
|
||||
transition: transform var(--medium) var(--transition-out);
|
||||
}
|
||||
}
|
||||
@@ -364,7 +361,7 @@ function addKeyAsNode() {
|
||||
}
|
||||
|
||||
button + button {
|
||||
margin-left: 24px;
|
||||
margin-inline-start: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -89,8 +89,9 @@ const clicked = (toggleTooltip: () => void) => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-list {
|
||||
width: 300px;
|
||||
inline-size: 300px;
|
||||
}
|
||||
|
||||
.custom-translations-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -108,13 +109,14 @@ const clicked = (toggleTooltip: () => void) => {
|
||||
}
|
||||
|
||||
.translation-display-text {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.translation-item-text {
|
||||
padding-top: 2px;
|
||||
padding-block-start: 2px;
|
||||
}
|
||||
|
||||
.translation-display-text,
|
||||
.translation-item-text {
|
||||
overflow: hidden;
|
||||
@@ -135,26 +137,25 @@ const clicked = (toggleTooltip: () => void) => {
|
||||
}
|
||||
|
||||
.v-icon {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
.v-progress-linear {
|
||||
flex: 1;
|
||||
width: unset;
|
||||
max-width: 100px;
|
||||
inline-size: unset;
|
||||
max-inline-size: 100px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item-content {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px;
|
||||
padding-block: 4px 2px;
|
||||
}
|
||||
|
||||
.v-list-item:not(:first-child) {
|
||||
.header {
|
||||
padding-top: 8px;
|
||||
border-top: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
padding-block-start: 8px;
|
||||
border-block-start: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -232,7 +232,7 @@ const newTranslationDefaults = computed(() => {
|
||||
<style lang="scss" scoped>
|
||||
.translation-input {
|
||||
.selected-translation {
|
||||
margin-right: auto;
|
||||
margin-inline-end: auto;
|
||||
padding: 2px 8px 0;
|
||||
color: var(--theme--primary);
|
||||
background-color: var(--theme--primary-background);
|
||||
@@ -260,7 +260,7 @@ const newTranslationDefaults = computed(() => {
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: 12px 8px 6px 8px;
|
||||
padding: 12px 8px 6px;
|
||||
|
||||
.search-input {
|
||||
--input-height: 40px;
|
||||
@@ -286,9 +286,7 @@ const newTranslationDefaults = computed(() => {
|
||||
}
|
||||
|
||||
:deep(mark) {
|
||||
flex-basis: auto;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex: 0 1 auto;
|
||||
color: var(--theme--primary);
|
||||
}
|
||||
|
||||
|
||||
@@ -201,6 +201,6 @@ function cancelAndClose() {
|
||||
}
|
||||
|
||||
.v-error {
|
||||
margin-top: 24px;
|
||||
margin-block-start: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -294,11 +294,11 @@ function remove(id: string) {
|
||||
|
||||
.drawer-content {
|
||||
padding: var(--content-padding);
|
||||
padding-bottom: var(--content-padding-bottom);
|
||||
padding-block-end: var(--content-padding-bottom);
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-bottom: 8px;
|
||||
margin-block-end: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -28,6 +28,6 @@ const { t } = useI18n();
|
||||
}
|
||||
|
||||
.v-button:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,7 +23,7 @@ const { t } = useI18n();
|
||||
}
|
||||
|
||||
.v-notice {
|
||||
margin-bottom: 24px;
|
||||
margin-block-end: 24px;
|
||||
}
|
||||
|
||||
.app-minimal-preview {
|
||||
|
||||
@@ -164,7 +164,7 @@ function useExpandCollapseAll() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-notice {
|
||||
margin-bottom: 36px;
|
||||
margin-block-end: 36px;
|
||||
}
|
||||
|
||||
.label-wrapper {
|
||||
@@ -174,7 +174,7 @@ function useExpandCollapseAll() {
|
||||
}
|
||||
|
||||
.type-label {
|
||||
margin-bottom: 8px;
|
||||
margin-block-end: 8px;
|
||||
}
|
||||
|
||||
.expand-collapse-action {
|
||||
|
||||
@@ -66,6 +66,6 @@ const fields = computed<DeepPartial<Field>[]>(() => [
|
||||
|
||||
<style scoped>
|
||||
.v-notice {
|
||||
margin-bottom: 36px;
|
||||
margin-block-end: 36px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -82,6 +82,6 @@ const fieldWarnings = computed(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-notice {
|
||||
margin-bottom: 36px;
|
||||
margin-block-end: 36px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -41,8 +41,8 @@ const internalCurrentTab = computed({
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
inline-size: 12px;
|
||||
block-size: 12px;
|
||||
background-color: var(--theme--foreground-subdued);
|
||||
border-radius: 50%;
|
||||
|
||||
|
||||
@@ -68,6 +68,6 @@ const fields = computed<DeepPartial<Field>[]>(() => [
|
||||
|
||||
<style scoped>
|
||||
.v-notice {
|
||||
margin-bottom: 36px;
|
||||
margin-block-end: 36px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -234,7 +234,6 @@ function save() {
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
padding: var(--content-padding);
|
||||
padding-top: 0;
|
||||
padding-bottom: var(--content-padding);
|
||||
padding-block: 0 var(--content-padding);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,9 +20,9 @@ const { t } = useI18n();
|
||||
padding: 12px;
|
||||
font-weight: 600;
|
||||
background-color: var(--theme--form--field--input--background);
|
||||
border-top-left-radius: var(--theme--border-radius);
|
||||
border-top-right-radius: var(--theme--border-radius);
|
||||
border-bottom: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
border-start-start-radius: var(--theme--border-radius);
|
||||
border-start-end-radius: var(--theme--border-radius);
|
||||
border-block-end: var(--theme--border-width) solid var(--theme--border-color-subdued);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user