Files
bigcapital/client/src/style/App.scss
2020-11-02 21:42:40 +02:00

432 lines
7.9 KiB
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);
@import '@blueprintjs/core/src/common/_variables.scss';
// @import "@blueprintjs/core/src/common/colors.scss";
$blue1: #0069ff;
$blue2: #0052ff;
$blue3: rgb(0, 82, 204);
$pt-link-color: $blue3;
$pt-intent-primary: $blue1;
$menu-item-color-hover: $light-gray4;
$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>");
$sidebar-zindex: 15;
$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
// Blueprint framework.
@import '@blueprintjs/core/src/blueprint.scss';
@import '@blueprintjs/datetime/src/blueprint-datetime.scss';
// Bootstrap
// @import '~bootstrap/scss/bootstrap';
@import 'basscss';
@import 'functions';
// Objects
@import 'objects/form';
@import 'objects/typography';
@import 'objects/buttons';
// Components
@import 'components/data-table';
@import 'components/dialog';
@import 'components/custom-scrollbar';
@import 'components/dragzone';
@import 'components/pagination';
@import 'components/resizer';
// Pages
// 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/items-categories';
@import 'pages/invite-form';
@import 'pages/currency';
@import 'pages/invite-user';
@import 'pages/exchange-rate';
@import 'pages/customer';
@import 'pages/billing';
@import 'pages/register-wizard-page';
@import 'pages/register-organizaton';
@import 'pages/bills';
@import 'pages/estimates';
@import 'pages/invoice-form';
@import 'pages/receipt-form';
@import 'pages/payment-made';
@import 'pages/payment-receive';
// Views
@import 'views/filter-dropdown';
@import 'views/sidebar';
// @import 'pages/estimate';
.App {
min-width: 960px;
}
.#{$ns}-tooltip {
box-shadow: none;
}
[data-icon='bigcapital'] {
path {
fill: #004dd0;
}
.path-1,
.path-13 {
fill: #2d95fd;
}
}
.bigcapital--alt {
svg {
path,
.path-13,
.path-1 {
fill: #fff;
}
}
}
// =======
body.authentication {
background-color: #fcfdff;
}
.bp3-toast {
box-shadow: none;
}
.select-list--fill-popover {
.bp3-transition-container,
.bp3-popover {
min-width: 100%;
}
}
.select-list--fill-button {
.bp3-popover-wrapper,
.bp3-popover-target {
display: block;
width: 100%;
}
.bp3-button {
width: 100%;
justify-content: start;
}
}
.bp3-datepicker-caption .bp3-html-select::after {
margin-right: 6px;
}
.hint {
margin-left: 6px;
position: relative;
top: -1px;
.bp3-icon {
color: #a1b2c5;
}
.bp3-popover-target:hover .bp3-icon {
color: #90a1b5;
}
.bp3-icon {
vertical-align: middle;
}
}
.bp3-select-popover .bp3-menu {
max-height: 300px;
max-width: 400px;
overflow: auto;
}
.pt-tooltip {
.pt-popover-content {
max-width: 100px;
}
}
.bp3-form-group .bp3-label {
.hint {
.bp3-popover-wrapper {
display: inline;
}
}
&:not(.bp3-inline) .hint .bp3-popover-target {
display: inline;
margin-left: 0;
}
}
.bp3-popover.bp3-tooltip {
max-width: 300px;
}
.bigcapital-loading{
height: 100%;
width: 100%;
position: absolute;
display: flex;
.center{
width: auto;
margin: auto;
display: flex;
flex-direction: column;
}
.text{
margin-top: 12px;
opacity: 0.85;
display: none;
}
}
.page-form{
&__header{
padding: 20px;
}
&__primary-section{
background-color: #fbfbfb;
padding: 30px 20px 20px;
margin: -20px;
padding-bottom: 6px;
}
&__footer{
padding: 15px;
margin: 15px 0 0 0;
}
&__floating-actions{
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
padding: 14px 18px;
border-top: 1px solid #ececec;
}
}
.datatable-editor{
padding: 15px 15px 0;
.bp3-form-group {
margin-bottom: 0;
}
.table {
border: 1px dotted rgb(195, 195, 195);
border-bottom: transparent;
border-left: transparent;
.th,
.td {
border-left: 1px dotted rgb(195, 195, 195);
&.index {
text-align: center;
span {
width: 100%;
font-weight: 500;
}
}
}
.thead {
.tr .th {
padding: 10px 10px;
background-color: #f2f5fa;
font-size: 14px;
font-weight: 500;
color: #1e1c3e;
&.index > div {
width: 100%;
}
}
}
.tbody {
.tr .td {
padding: 7px;
border-bottom: 1px dotted rgb(195, 195, 195);
min-height: 46px;
&.index {
background-color: #f2f5fa;
> span {
margin-top: auto;
margin-bottom: auto;
}
}
}
.tr {
.bp3-form-group:not(.bp3-intent-danger) .bp3-input,
.form-group--select-list .bp3-button {
border-color: #e5e5e5;
border-radius: 3px;
padding-left: 8px;
padding-right: 8px;
}
.form-group--select-list {
&.bp3-intent-danger {
.bp3-button:not(.bp3-minimal) {
border-color: #db3737;
}
}
}
&:last-of-type {
.td {
border-bottom: transparent;
.bp3-button,
.bp3-input-group {
display: none;
}
}
}
.td.actions {
.bp3-button {
background-color: transparent;
color: #e66d6d;
&:hover {
color: #c23030;
}
svg {
color: inherit;
}
}
}
&.row--total {
.account.td,
.debit.td,
.credit.td {
> span {
padding-top: 2px;
}
}
.debit.td,
.credit.td {
> span {
font-weight: 600;
color: #444;
}
}
}
.td {
&.note {
.bp3-form-group {
width: 100%;
}
}
}
}
}
.th {
color: #444;
font-weight: 600;
border-bottom: 1px dotted #666;
}
.td {
border-bottom: 1px dotted #999;
}
.actions.td {
.bp3-button {
background: transparent;
margin: 0;
}
}
}
.table{
.tbody{
.tr .td.actions .bp3-button{
background-color: transparent;
color: #e66d6d;
svg{
color: inherit;
}
}
}
}
&__actions{
.bp3-button{
padding-left: 10px;
padding-right: 10px;
}
.button--clear-lines{
&.bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
background-color: #fcefef;
}
}
}
}
.cloud-spinner{
position: relative;
&.is-loading:before{
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 999;
}
.bp3-spinner{
position: absolute;
z-index: 999999;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -20px;
}
&:not(.is-loading) .bp3-spinner{
display: none;
}
}