jws-frontend/src/css/quasar.variables.scss
2024-07-23 07:25:11 +00:00

130 lines
2.4 KiB
SCSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap');
$typography-font-family: 'Noto Sans Thai', sans-serif !default;
$primary: var(--brand-1);
$secondary: var(--brand-2);
$accent: #9c27b0;
$dark: var(--gray-10);
$dark-page: var(--gray-11);
$positive: #00bd9d;
$negative: var(--red-9);
$info: var(--blue-6);
$warning: #ffc224;
$disabled: var(--stone-4);
$separator-color: var(--border-color);
$separator-dark-color: var(--border-color);
.q-separator {
transition: none;
}
.q-field__control {
background: var(--surface-1);
color: $primary;
}
.q-field--outlined .q-field__control {
border-radius: var(--radius-2);
&::before {
transition: none;
border-color: var(--border-color);
border-radius: var(--radius-2);
}
&:hover::before {
border-color: var(--border-color);
}
}
.q-menu,
.q-card {
box-shadow: var(--shadow-2) !important;
}
.q-dialog__backdrop {
background-color: hsla(0 0% 60% / 0.4) !important;
}
.q-field--dense .q-field__label {
font-family: 'Noto Sans Thai', sans-serif;
}
.q-field__inner {
font-family: 'Noto Sans Thai', sans-serif;
}
div.fullscreen.q-drawer__backdrop {
background-color: hsla(0 0% 60% / 0.4) !important;
}
.q-field--dense .q-field__label {
font-family: 'Noto Sans Thai', sans-serif;
}
.q-field__inner {
font-family: 'Noto Sans Thai', sans-serif;
}
.dp__menu.dp__menu_index.dp--menu-wrapper {
font-family: 'Noto Sans Thai', sans-serif;
}
.dp__overlay_cell.dp__overlay_cell_pad {
font-family: 'Noto Sans Thai', sans-serif;
}
.disabled,
.disabled *,
[disabled],
[disabled] * {
color: hsl(var(--text-mute)) !important;
}
.bg-disabled {
background: $disabled;
}
.text-disabled {
color: $disabled;
}
.q-field--outlined.q-field--readonly .q-field__control:before {
border-color: transparent;
}
.q-field__native {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// q-tree
.q-tree__node-header.relative-position.row.no-wrap.items-center {
padding-block: 0px;
}
.q-tree__node-header:before {
color: hsl(var(--text-mute));
}
.q-tree__node-header.relative-position.row.no-wrap.items-center:has(
.clickable-node
):hover {
background-color: hsla(var(--info-bg) / 0.1);
}
.q-tree__node-header.relative-position.row.no-wrap.items-center:has(
.clickable-node.active-node
) {
background-color: hsla(var(--info-bg) / 0.1);
}
.q-tree__node-header {
padding-left: 0px !important;
}