QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 21:30:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-08-06 16:13:24 +02:00
parent 6393f30735
commit ffff3a6872
30 changed files with 243 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/webapp/src/style/App.scss
View File

@@ -5,6 +5,12 @@
@import '@blueprintjs/datetime/src/blueprint-datetime.scss';
@import '@blueprintjs/popover2/src/blueprint-popover2.scss';
@mixin dark-mode {
.bp4-dark & {
@content;
}
}
// Objects
@import 'objects/form';
@import 'objects/switch';
@@ -38,10 +44,11 @@
@import 'pages/fonts';
@import "section";
// App
.App {
min-width: 1100px;
min-height: 100vh;
background-color: $app-bg;
background-color: var(--color-app-background);
}
// =======

5
packages/webapp/src/style/_variables.scss
View File

@@ -60,6 +60,8 @@ $ns: bp4;
--color-ui-menu-select-item-hover-background: #edeff2;
--color-ui-menu-select-item-active-background: var(--color-primary);
--color-app-background: #fff;
// Splash screen.
--color-splash-screen-background: #fff;
@@ -341,6 +343,9 @@ body.bp4-dark {
--color-ui-menu-select-item-hover-background: rgba(143, 153, 168, .15);
--color-ui-menu-select-item-active-background: var(--color-primary);
// App
--color-app-background: var(--color-dark-gray1);
// Splash screen.
--color-splash-screen-background: #fff;
--color-splash-screen-background: var(--color-dark-gray1);

7
packages/webapp/src/style/components/BigAmount.scss
View File

@@ -3,9 +3,10 @@
--x-color-amount-text: #343463;
--x-color-label-text: #5d6f90;
--x-color-label-text: var(--color-light-gray1);
--x-color-amount-text: var(--color-light-gray2);
:global(.bp4-dark) & {
--x-color-label-text: var(--color-light-gray1);
--x-color-amount-text: var(--color-light-gray2);
}
text-align: right;
&__label{

18
packages/webapp/src/style/components/PageForm.scss
View File

@@ -3,26 +3,26 @@
// > .page-form__content
// > .page-form__floating-actions
.page-form {
--color-page-form-background: #fff;
--color-page-form-header-background: #fff;
--color-page-form-header-border: #d2dce2;
--color-page-form-header-background: var(--color-dark-gray1);
--color-page-form-header-border: rgba(255, 255, 255, 0.1);
:global(.bp4-dark) & {
--color-page-form-header-background: var(--color-dark-gray1);
--color-page-form-header-border: rgba(255, 255, 255, 0.1);
}
$self: '.page-form';
padding-bottom: 20px;
&__floating-actions {
--color-page-form-floating-actions-background: #fff;
--color-page-form-floating-actions-border: rgb(210, 221, 226);
--color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
--color-page-form-floating-actions-background: var(--color-dark-gray1);
--color-page-form-floating-actions-border: var(--color-dark-gray5);
--color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
:global(.bp4-dark) & {
--color-page-form-floating-actions-background: var(--color-dark-gray1);
--color-page-form-floating-actions-border: var(--color-dark-gray5);
--color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
}
position: fixed;
bottom: 0;

35
packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss
View File

@@ -1,17 +1,36 @@
@mixin dark-mode {
.bp4-dark & {
@content;
}
}
//
// Financial sheet - Drawer header.
// --------------------
.financial-header-drawer {
--x-color-background: var(--color-dark-gray1);
--x-color-backdrop-background: rgba(2, 9, 19, 0.65);
--x-color-background: #fff;
--x-color-backdrop-background: rgba(2, 9, 19, 0.65);
--x-color-tabs-border: var(--color-dark-gray2);
--x-color-tabs-tab-item-background: var(--color-dark-gray3);
--x-color-tabs-indicator-background: var(--color-dark-gray2);
--x-color-tabs-indicator-border: var(--color-primary);
--x-color-tabs-border: #c3cdd5;
--x-color-tabs-tab-item-background: var(--color-dark-gray3);
--x-color-tabs-indicator-background: #edf5ff;
--x-color-tabs-indicator-border: #0350f8;
--x-color-footer-background: #ecf0f3;
--x-color-footer-border: #c3cdd5;
--x-color-footer-background: var(--color-dark-gray3);
--x-color-footer-border: var(--color-dark-gray1);
@include dark-mode {
--x-color-background: var(--color-dark-gray1);
--x-color-backdrop-background: rgba(2, 9, 19, 0.65);
--x-color-tabs-border: var(--color-dark-gray2);
--x-color-tabs-tab-item-background: var(--color-dark-gray3);
--x-color-tabs-indicator-background: var(--color-dark-gray2);
--x-color-tabs-indicator-border: var(--color-primary);
--x-color-footer-background: var(--color-dark-gray3);
--x-color-footer-border: var(--color-dark-gray1);
}
padding: 25px 26px 25px;
position: absolute;