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

feat: Optimize SCSS architecture.

Browse Source
This commit is contained in:
a.bouhuolia
2021-01-17 12:17:15 +02:00
parent a747750d88
commit 09db5df686
154 changed files with 2814 additions and 2772 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/style/components/Alert.scss Normal file
View File

@@ -0,0 +1,7 @@
.bp3-alert{
.bp3-alert-footer{
.bp3-button{
min-width: 70px;
}
}
}

20
client/src/style/components/BigAmount.scss Normal file
View File

@@ -0,0 +1,20 @@
.big-amount{
&__label{
color: #5d6f90;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
&__number{
margin: 0;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 400;
margin-top: 6px;
color: #343463;
line-height: 1;
font-size: 34px;
}
}

19
client/src/style/components/BigcapitalLoading.scss Normal file
View File

@@ -0,0 +1,19 @@
.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;
}
}

5
client/src/style/components/Card.scss Normal file
View File

@@ -0,0 +1,5 @@
.card{
background: #fff;
border: 1px solid #d2dce2;
}

28
client/src/style/components/CloudSpinner.scss Normal file
View File

@@ -0,0 +1,28 @@
.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;
}
}

0
client/src/style/components/custom-scrollbar.scss → client/src/style/components/CustomScrollbar.scss
View File

151
client/src/style/components/data-table.scss → client/src/style/components/DataTable/DataTable.scss
View File

@@ -1,27 +1,26 @@
@import 'src/style/Base.scss';
.bigcapital-datatable{
.bigcapital-datatable {
display: block;
.dashboard__page-content &{
.table .thead{
.th{
border-bottom-color: #D2DDE2;
.dashboard__page-content & {
.table .thead {
.th {
border-bottom-color: #d2dde2;
}
}
}
.table {
text-align: left;
border-spacing: 0;
min-width: 100%;
display: block;
.thead{
.thead {
overflow-y: auto;
overflow-x: hidden;
.th{
.th {
padding: 0.6rem 0.5rem;
background: #fafafa;
font-size: 14px;
@@ -29,7 +28,7 @@
font-weight: 500;
border-bottom: 1px solid rgb(224, 224, 224);
}
.sort-icon{
.sort-icon {
width: 0;
height: 0;
position: relative;
@@ -37,12 +36,12 @@
display: inline-block;
margin-left: 5px;
&--desc{
&--desc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid #666;
}
&--asc{
&--asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #666;
@@ -53,7 +52,7 @@
.tr {
display: flex;
flex: 1 0 auto;
&:last-child {
.td {
border-bottom: 0;
@@ -75,7 +74,7 @@
border-right: 0;
}
.bp3-control{
.bp3-control {
margin-bottom: 0;
}
.resizer {
@@ -88,94 +87,94 @@
top: 0;
transform: translateX(50%);
z-index: 1;
touch-action:none;
touch-action: none;
&.isResizing {
// background: red;
}
.inner-resizer{
.inner-resizer {
height: 100%;
width: 1px;
border-left: 1px solid #ececec;
margin: 0 auto;
}
&.isResizing .inner-resizer{
background: #1183DA;
&.isResizing .inner-resizer {
background: #1183da;
}
}
.bp3-control.bp3-checkbox .bp3-control-indicator{
.bp3-control.bp3-checkbox .bp3-control-indicator {
border: 2px solid #d7d7d7;
&,
&:hover{
&:hover {
height: 16px;
width: 16px;
}
}
.bp3-control.bp3-checkbox{
.bp3-control.bp3-checkbox {
input:checked ~ .bp3-control-indicator,
input:indeterminate ~ .bp3-control-indicator,{
input:indeterminate ~ .bp3-control-indicator {
border-color: #0052ff;
}
}
}
}
.tbody{
.tbody {
width: 100%;
overflow: auto;
.tbody-inner{
> .loading{
.tbody-inner {
> .loading {
padding-top: 40px;
}
}
.tr .td{
border-bottom: 1px solid #E8E8E8;
.tr .td {
border-bottom: 1px solid #e8e8e8;
align-items: center;
color: #141720;
.placeholder{
color: #A0A0A0;
.placeholder {
color: #a0a0a0;
}
.bp3-form-group{
.bp3-form-group {
width: 100%;
}
}
.tr:hover .td{
}
.tr:hover .td {
background: #f3f7fc;
}
.tr.is-context-menu-active .td{
background: #F3FAFC;
.tr.is-context-menu-active .td {
background: #f3fafc;
}
.td.actions .#{$ns}-button{
background: #E6EFFB;
.td.actions .#{$ns}-button {
background: #e6effb;
border: 0;
box-shadow: none;
padding: 5px 15px;
border-radius: 8px;
&:hover,
&:focus{
background-color: #CFDCEE;
&:focus {
background-color: #cfdcee;
}
svg{
color: #425361
svg {
color: #425361;
}
.bp3-icon-more-h-16{
.bp3-icon-more-h-16 {
margin-top: 2px;
}
}
.tr.no-results{
.td{
.tr.no-results {
.td {
flex-direction: column;
padding: 20px;
color: #666;
@@ -183,14 +182,14 @@
}
}
> .loading{
> .loading {
padding-top: 50px;
}
}
.tr .th,
.tr .td{
.expand-toggle{
.tr .td {
.expand-toggle {
cursor: pointer;
display: inline-block;
padding: 0 8px 0 0;
@@ -198,7 +197,7 @@
margin: auto 0;
margin-left: 4px;
.arrow-right{
.arrow-right {
width: 0;
height: 0;
border-top: 5px solid transparent;
@@ -206,10 +205,10 @@
border-left: 8px solid #acacac;
display: block;
}
.arrow-down{
width: 0;
height: 0;
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #acacac;
@@ -219,27 +218,25 @@
}
}
.no-results{
.no-results {
color: #666;
.td{
.td {
padding-top: 20px;
padding-bottom: 20px;
padding-bottom: 20px;
width: 100%;
}
}
&.has-sticky-header{
.thead{
.tr .th{
&.has-sticky-header {
.thead {
.tr .th {
position: sticky;
}
}
}
&.has-sticky {
.thead,
.tfoot {
position: sticky;
@@ -273,38 +270,10 @@
}
}
&.has-virtualized-rows{
.tbody{
&.has-virtualized-rows {
.tbody {
overflow-y: scroll;
overflow-x: hidden;
}
}
&--financial-report{
.table {
.thead{
.tr .th{
background: transparent;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
padding: 8px 0.4rem;
color: #222;
}
}
.tbody{
.tr .td{
border-bottom: 0;
}
.tr:not(:first-child) .td{
border-top: 1px dotted #CCC;
}
.tr:last-child .td{
border-bottom: 1px dotted #CCC;
}
}
}
}
}
}

207
client/src/style/components/DataTable/DataTableEditable.scss Normal file
View File

@@ -0,0 +1,207 @@
.datatable-editor {
.bp3-form-group {
margin-bottom: 0;
}
.table {
border: 1px solid #d2dce2;
border-left: transparent;
.th,
.td {
border-left: 1px solid #e2e2e2;
&.index {
text-align: center;
span {
width: 100%;
font-weight: 500;
}
}
&:first-child {
border-left: 1px solid #d2dce2;
}
}
.thead {
.tr .th {
padding: 10px 10px;
background-color: #f0f2f8;
font-size: 14px;
font-weight: 500;
color: #1c1940;
&.index > div {
width: 100%;
}
}
}
.tbody {
.tr .td {
padding: 5px;
border-bottom: 0;
border-top: 1px dashed #aaa;
min-height: 42px;
&.index {
background-color: #f0f2f8;
> 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: #ffffff;
color: #222;
border-radius: 3px;
}
.bp3-form-group:not(.bp3-intent-danger) .bp3-input {
border-radius: 2px;
padding-left: 4px;
padding-right: 4px;
&:focus {
box-shadow: 0 0 0 2px #116cd0;
}
}
.form-group--select-list .bp3-button {
padding-left: 6px;
padding-right: 6px;
&:after {
display: none;
}
}
.form-group--select-list,
.bp3-form-group {
&.bp3-intent-danger {
.bp3-button:not(.bp3-minimal),
.bp3-input {
border-color: #f7b6b6;
}
}
}
&:first-of-type {
.td {
border-top: 0;
}
}
&:last-of-type {
.td {
.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 {
margin-top: 12px;
.bp3-button {
padding-left: 10px;
padding-right: 10px;
}
.button--clear-lines {
&.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
background-color: #fcefef;
}
}
}
&.has-total-row {
.table .tbody-inner .tr:last-of-type {
.td {
border-top-width: 2px;
border-top-color: #e9e9ef;
border-top-style: solid;
min-height: 40px;
&:not(.index) {
background-color: #fcfcfd;
}
&.index span {
display: none;
}
}
}
}
}

35
client/src/style/components/DataTable/DataTableEmptyStatus.scss Normal file
View File

@@ -0,0 +1,35 @@
.datatable-empty-status {
max-width: 550px;
width: 100%;
margin: 0 auto;
text-align: center;
margin-top: 200px;
&__title {
font-size: 20px;
color: #2c3a5d;
font-weight: 600;
margin-left: auto;
margin-bottom: 10px;
margin-right: auto;
margin-top: 0;
line-height: 1.4;
}
&__desc {
font-size: 16px;
color: #1f3255;
opacity: 0.8;
line-height: 1.6;
}
&__actions {
margin-top: 26px;
.bp3-button {
min-height: 36px;
& + .bp3-button {
margin-left: 10px;
}
}
}
}

4
client/src/style/components/pagination.scss → client/src/style/components/DataTable/Pagination.scss
View File

@@ -94,9 +94,7 @@
border-top-width: 4px;
margin-right: 6px;
}
}
}
}
&__goto-control{

1
client/src/style/components/dialog.scss → client/src/style/components/Dialog/Dialog.scss
View File

@@ -1,3 +1,4 @@
@import '../../Base.scss';
// Dialog
.#{$ns}-dialog{

16
client/src/style/components/Hint.scss Normal file
View File

@@ -0,0 +1,16 @@
.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;
}
}

49
client/src/style/components/PageForm.scss Normal file
View File

@@ -0,0 +1,49 @@
// .page-form
// > .page-form__header
// > .page-form__content
// > .page-form__floating-actions
.page-form {
$self: '.page-form';
padding-bottom: 20px;
&__floating-actions {
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
padding: 14px 18px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
}
&--strip {
#{$self}__header-fields {
width: 85%;
}
#{$self}__body,
#{$self}__footer {
max-width: 1200px;
}
#{$self}__header {
background-color: #fbfbfb;
padding: 30px 20px 0;
border-bottom: 1px solid #d2dce2;
.bp3-form-group.bp3-inline label.bp3-label {
font-weight: 500;
}
}
#{$self}__body {
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
}
#{$self}__footer {
margin: 25px 0 0 0;
padding-left: 20px;
padding-right: 20px;
}
}
}

3
client/src/style/components/Toast.scss Normal file
View File

@@ -0,0 +1,3 @@
.bp3-toast {
box-shadow: none;
}

11
client/src/style/components/Tooltip.scss Normal file
View File

@@ -0,0 +1,11 @@
.pt-tooltip {
.pt-popover-content {
max-width: 100px;
}
}
.#{$ns}-tooltip {
box-shadow: none;
}

29
client/src/style/components/dragzone.scss
View File

@@ -1,30 +1,33 @@
.dropzone{
.dropzone {
flex: 1 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 18px;
border-width: 1px;
border-color: #AFAFAF;
border-color: #afafaf;
border-style: dashed;
color: #999;
outline: none;
transition: border .24s ease-in-out;
transition: border 0.24s ease-in-out;
font-size: 14px;
p{
p {
margin: auto;
}
}
.dropzone-thumbs{
.dropzone-container {
max-width: 250px;
margin-left: auto;
}
.dropzone-thumbs {
display: flex;
flex-direction: row;
margin-top: 15px;
}
.dropzone-thumb{
.dropzone-thumb {
position: relative;
display: inline-block;
border-radius: 2px;
@@ -34,14 +37,14 @@
width: 100px;
padding: 2px;
img{
img {
display: block;
height: 100%;
width: auto;
max-width: 100%;
}
button{
button {
height: 16px;
width: 16px;
color: #fff;
@@ -55,20 +58,20 @@
left: -5px;
visibility: hidden;
.bp3-icon{
.bp3-icon {
position: relative;
top: -3px;
left: 0px;
}
}
&:hover button{
&:hover button {
visibility: visible;
}
}
.dropzone-hint{
.dropzone-hint {
font-size: 12px;
margin-bottom: 6px;
color: #777;
}
}