mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 12:50:38 +00:00
WIP Feature / General & Users & Sidebar
This commit is contained in:
elforjani3
@@ -1,9 +1,9 @@
|
||||
@import './normalize.scss';
|
||||
|
||||
@import "./normalize.scss";
|
||||
$pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
|
||||
0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
|
||||
|
||||
$pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
|
||||
|
||||
@import "@blueprintjs/core/src/common/_variables.scss";
|
||||
@import '@blueprintjs/core/src/common/_variables.scss';
|
||||
// @import "@blueprintjs/core/src/common/colors.scss";
|
||||
|
||||
$menu-item-color-hover: $light-gray4;
|
||||
@@ -12,41 +12,43 @@ $menu-item-color-active: $light-gray3;
|
||||
$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
|
||||
|
||||
// Blueprint framework.
|
||||
@import "@blueprintjs/core/src/blueprint.scss";
|
||||
@import "@blueprintjs/datetime/src/blueprint-datetime.scss";
|
||||
@import '@blueprintjs/core/src/blueprint.scss';
|
||||
@import '@blueprintjs/datetime/src/blueprint-datetime.scss';
|
||||
|
||||
@import "basscss";
|
||||
@import 'basscss';
|
||||
|
||||
$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
|
||||
$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
|
||||
|
||||
@import "functions";
|
||||
@import 'functions';
|
||||
|
||||
// Objects
|
||||
@import "objects/form";
|
||||
@import "objects/typography";
|
||||
@import "objects/buttons";
|
||||
@import 'objects/form';
|
||||
@import 'objects/typography';
|
||||
@import 'objects/buttons';
|
||||
|
||||
// Components
|
||||
@import "components/data-table";
|
||||
@import "components/dialog";
|
||||
|
||||
@import 'components/data-table';
|
||||
@import 'components/dialog';
|
||||
|
||||
// Pages
|
||||
@import "pages/dashboard";
|
||||
@import "pages/accounts-chart";
|
||||
@import "pages/authentication";
|
||||
@import "pages/expense-form";
|
||||
@import "pages/financial-statements";
|
||||
@import "pages/make-journal-entries";
|
||||
@import "pages/preferences";
|
||||
@import "pages/view-form";
|
||||
@import "pages/manual-journals";
|
||||
@import "pages/item-category";
|
||||
@import "pages/items";
|
||||
@import 'pages/dashboard';
|
||||
@import 'pages/accounts-chart';
|
||||
@import 'pages/authentication';
|
||||
@import 'pages/expense-form';
|
||||
@import 'pages/financial-statements';
|
||||
@import 'pages/make-journal-entries';
|
||||
@import 'pages/preferences';
|
||||
@import 'pages/view-form';
|
||||
@import 'pages/manual-journals';
|
||||
@import 'pages/item-category';
|
||||
@import 'pages/items';
|
||||
@import 'pages/invite-form.scss';
|
||||
|
||||
// Views
|
||||
@import "views/filter-dropdown";
|
||||
@import "views/sidebar";
|
||||
@import 'views/filter-dropdown';
|
||||
@import 'views/sidebar';
|
||||
|
||||
.#{$ns}-tooltip{
|
||||
.#{$ns}-tooltip {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
47
client/src/style/pages/invite-form.scss
Normal file
47
client/src/style/pages/invite-form.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
// .dialog--invite-form {
|
||||
|
||||
// }
|
||||
|
||||
.dialog--invite-form {
|
||||
&.bp3-dialog {
|
||||
width: 400px;
|
||||
}
|
||||
&:not(.dialog--loading) .bp3-dialog-body {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.bp3-dialog-body {
|
||||
// margin-right: 50px;
|
||||
.bp3-form-group.bp3-inline {
|
||||
.bp3-label {
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
&.form-group--email {
|
||||
.bp3-form-content {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bp3-dialog-footer-actions {
|
||||
margin-right: 30px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .bp3-dialog-body {
|
||||
// .bp3-form-group.bp3-inline {
|
||||
// .bp3-label {
|
||||
// min-width: 100px;
|
||||
// }
|
||||
// .bp3-form-content {
|
||||
// width: 250px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .bp3-dialog-footer-actions {
|
||||
// display: flex;
|
||||
// justify-content: flex-end;
|
||||
// margin-right: 100px;
|
||||
// }
|
||||
@@ -90,3 +90,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.preferences__tabs-extra-actions {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@@ -1,117 +1,191 @@
|
||||
|
||||
$sidebar-background: #01194E;
|
||||
$sidebar-background: #01194e;
|
||||
$sidebar-text-color: #fff;
|
||||
$sidebar-width: 220px;
|
||||
$sidebar-menu-item-color: #b8c0d5;
|
||||
|
||||
$sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
.ScrollbarsCustom {
|
||||
position: 'relative';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
.ScrollbarsCustom-Wrapper {
|
||||
position: 'absolute';
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ScrollbarsCustom-Content {
|
||||
box-sizing: 'border-box';
|
||||
}
|
||||
|
||||
.ScrollbarsCustom-Track {
|
||||
&.ScrollbarsCustom-TrackY,
|
||||
&.ScrollbarsCustom-TrackX {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
user-select: none;
|
||||
}
|
||||
&.ScrollbarsCustom-TrackX {
|
||||
height: 10px;
|
||||
width: calc(100% - 20px);
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
}
|
||||
&.ScrollbarsCustom-TrackY {
|
||||
width: 10px;
|
||||
height: calc(100% - 20px);
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
.ScrollbarsCustom-Thumb {
|
||||
&.ScrollbarsCustom-ThumbX,
|
||||
&.ScrollbarsCustom-ThumbY {
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 0, 0, 1);
|
||||
}
|
||||
&.ScrollbarsCustom-ThumbX {
|
||||
height: 100%;
|
||||
width: 0px;
|
||||
}
|
||||
&.ScrollbarsCustom-ThumbY {
|
||||
height: 100%;
|
||||
width: 0px;
|
||||
}
|
||||
}
|
||||
.sidebar {
|
||||
background: $sidebar-background;
|
||||
color: $sidebar-text-color;
|
||||
width: $sidebar-width;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
|
||||
&__inner{
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
// ::-webkit-scrollbar {
|
||||
// width: 14px;
|
||||
// background: transparent;
|
||||
// }
|
||||
// ::-webkit-scrollbar-thumb {
|
||||
// background-clip: content-box;
|
||||
// border: 4px solid transparent;
|
||||
// border-radius: 7px;
|
||||
// box-shadow: inset 0 0 0 10px;
|
||||
// }
|
||||
// ::-webkit-scrollbar-button {
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// overflow: auto;
|
||||
// color: #ff000000;
|
||||
// transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
// &__inner {
|
||||
// overflow-y: scroll;
|
||||
// overflow-x: hidden;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
&__head{
|
||||
&__head {
|
||||
padding: 16px 10px;
|
||||
|
||||
&-company-meta{
|
||||
|
||||
.company-name{
|
||||
&-company-meta {
|
||||
.company-name {
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
margin-bottom: 5px;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
.company-meta{
|
||||
.company-meta {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-menu{
|
||||
&-menu {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
min-width: $sidebar-width;
|
||||
border-radius: 0;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
.#{$ns}-menu-item{
|
||||
.#{$ns}-menu-item {
|
||||
color: $sidebar-menu-item-color;
|
||||
border-radius: 0;
|
||||
padding: 10px 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover,
|
||||
&.bp3-active{
|
||||
&.bp3-active {
|
||||
background: #012470;
|
||||
color: #c1c9dd;
|
||||
}
|
||||
&:focus,
|
||||
&:active{
|
||||
background: #01143e;
|
||||
&:active {
|
||||
background: #01143e;
|
||||
}
|
||||
|
||||
> .#{$ns}-icon{
|
||||
> .#{$ns}-icon {
|
||||
color: #767b9b;
|
||||
margin-right: 14px;
|
||||
margin-top: 0;
|
||||
}
|
||||
> .#{$ns}-icon-caret-right{
|
||||
> .#{$ns}-icon-caret-right {
|
||||
margin-right: -4px;
|
||||
margin-top: 3px;
|
||||
color: #42547b;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-submenu{
|
||||
|
||||
.#{$ns}-collapse{
|
||||
.#{$ns}-submenu {
|
||||
.#{$ns}-collapse {
|
||||
border-left: 2px solid rgba(255, 255, 255, 0.15);
|
||||
|
||||
&-body{
|
||||
&-body {
|
||||
background-color: rgb(11, 34, 85);
|
||||
padding-bottom: 6px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.#{$ns}-menu-item{
|
||||
.#{$ns}-menu-item {
|
||||
padding: 7px 16px 7px 18px;
|
||||
font-size: 15px;
|
||||
color: #8a95b6;
|
||||
|
||||
&:hover,
|
||||
&.bp3-active{
|
||||
&.bp3-active {
|
||||
background: transparent;
|
||||
color: #C5CBE3;
|
||||
color: #c5cbe3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$ns}-popover{
|
||||
.#{$ns}-popover {
|
||||
padding: 0;
|
||||
|
||||
&-content{
|
||||
&-content {
|
||||
box-shadow: 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item{
|
||||
.#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item {
|
||||
color: $sidebar-menu-item-color;
|
||||
}
|
||||
.#{$ns}-menu-divider{
|
||||
border-top-color: #1D366A;
|
||||
color: #6B708C;
|
||||
.#{$ns}-menu-divider {
|
||||
border-top-color: #1d366a;
|
||||
color: #6b708c;
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user