mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-19 06:10:31 +00:00
feat: scss architecture.
This commit is contained in:
Ahmed Bouhuolia
11
client/src/style/pages/account-form.scss
Normal file
11
client/src/style/pages/account-form.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
|
||||
// Dialog Account Form.
|
||||
.dialog--account-form{
|
||||
|
||||
.#{$ns}-form-group{
|
||||
.#{$ns}-label{
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
client/src/style/pages/accounts-chart.scss
Normal file
25
client/src/style/pages/accounts-chart.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
|
||||
.dashboard__insider--accounts-chart{
|
||||
|
||||
.e-grid{
|
||||
.e-gridheader{
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.account-normal{
|
||||
|
||||
.#{$ns}-icon{
|
||||
color: #666;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-row{
|
||||
width: 0;
|
||||
|
||||
.#{$ns}-control{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,246 @@
|
||||
|
||||
|
||||
.dashboard{
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
|
||||
&__topbar{
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #F2EFEF;
|
||||
|
||||
&-right,
|
||||
&-left{
|
||||
display: flex;
|
||||
}
|
||||
&-actions{
|
||||
|
||||
}
|
||||
&-sidebar-toggle{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 4px;
|
||||
|
||||
.#{$ns}-button{
|
||||
color: #8E8E8E;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus{
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-navbar{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 18px;
|
||||
|
||||
.#{$ns}-button{
|
||||
color: #1552C8;
|
||||
font-weight: 5000;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: rgba(178, 220, 253, 0.15);
|
||||
}
|
||||
.#{$ns}-icon{
|
||||
color: #1552C8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-user{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 28px;
|
||||
|
||||
.#{$ns}-button{
|
||||
background-size: contain;
|
||||
border-radius: 50%;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
background-image: url(http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=400);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__breadcrumbs{
|
||||
display: flex;
|
||||
margin-left: 16px;
|
||||
align-items: center;
|
||||
|
||||
// Breadcrumbs component.
|
||||
.#{$ns}-breadcrumbs-collapsed{
|
||||
background: $light-gray3;
|
||||
|
||||
&:hover{
|
||||
background: $light-gray2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__actions-bar{
|
||||
border-bottom: 2px solid #EAEAEA;
|
||||
|
||||
.#{$ns}-navbar{
|
||||
box-shadow: none;
|
||||
|
||||
&,
|
||||
&-group{
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.#{$ns}-navbar-divider{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.#{$ns}-button{
|
||||
color: #5C5C5C;
|
||||
padding: 8px 12px;
|
||||
|
||||
&:hover{
|
||||
background: rgba(167, 182, 194, 0.12);
|
||||
color: #5C5C5C;
|
||||
}
|
||||
.#{$ns}-icon{
|
||||
color: #666;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.button--table-views{
|
||||
.#{$ns}-icon{
|
||||
color: #1183DA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__breadcrumbs{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
&__title{
|
||||
align-items: center;;
|
||||
display: flex;
|
||||
margin-left: 6px;
|
||||
|
||||
h1{
|
||||
font-size: 26px;
|
||||
font-weight: 100;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sep{
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
color: #999;
|
||||
border-left: 1px solid #d9d9d9;
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
h3{
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: #777;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-content{
|
||||
width: calc(100% - 220px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
}
|
||||
|
||||
&__insider{
|
||||
height: 100%;
|
||||
|
||||
&--loading{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__page-content{
|
||||
// padding: 22px;
|
||||
}
|
||||
|
||||
&__preferences-topbar{
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
height: 70px;
|
||||
padding: 0 22px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h2{
|
||||
font-size: 22px;
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs--dashboard-views{
|
||||
|
||||
.#{$ns}-tab{
|
||||
color: #5C5C5C;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
font-weight: 400;
|
||||
padding: 0 14px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.#{$ns}-tab-indicator-wrapper{
|
||||
.#{$ns}-tab-indicator{
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.button--new-view{
|
||||
margin: 0;
|
||||
height: 50px;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus{
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: 0 0 0;
|
||||
}
|
||||
|
||||
.#{$ns}-icon{
|
||||
color: #A7A7A7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar--dashboard-views{
|
||||
box-shadow: 0 0 0;
|
||||
border-bottom: 1px solid #EAEAEA;
|
||||
}
|
||||
17
client/src/style/pages/expense-form.scss
Normal file
17
client/src/style/pages/expense-form.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
|
||||
|
||||
.dashboard__insider--expense-form{
|
||||
padding: 40px 20px;
|
||||
|
||||
.#{$ns}-form-group{
|
||||
margin-bottom: 22px;
|
||||
|
||||
.#{$ns}-label{
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
.#{$ns}-form-content{
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
48
client/src/style/pages/financial-statements.scss
Normal file
48
client/src/style/pages/financial-statements.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
|
||||
|
||||
|
||||
.financial-statement{
|
||||
|
||||
&__header{
|
||||
padding: 30px;
|
||||
background: #FDFDFD;
|
||||
}
|
||||
|
||||
&__body{
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.financial-sheet{
|
||||
border: 1px solid #E2E2E2;
|
||||
min-width: 640px;
|
||||
width: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
margin-top: 40px;
|
||||
|
||||
&__title{
|
||||
font-weight: 200;
|
||||
font-size: 22px;
|
||||
color: #222;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__sheet-type{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__date{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__table{
|
||||
|
||||
}
|
||||
|
||||
&__accounting-basis{
|
||||
|
||||
}
|
||||
}
|
||||
39
client/src/style/pages/make-journal-entries.scss
Normal file
39
client/src/style/pages/make-journal-entries.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
|
||||
.make-journal-entries{
|
||||
|
||||
&__header{
|
||||
padding: 25px 40px;
|
||||
background: #fbfbfb;
|
||||
}
|
||||
|
||||
&__table{
|
||||
.bp3-form-group{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
table{
|
||||
border: 1px solid transparent;
|
||||
|
||||
thead{
|
||||
th.index{ width: 3%; }
|
||||
th.account{ width: 22%; }
|
||||
th.note{ width: 40%; }
|
||||
th.credit{ width: 17.5%; }
|
||||
th.debit{ width: 17.5%; }
|
||||
}
|
||||
|
||||
th,
|
||||
td{
|
||||
border-right: 1px dotted #999;
|
||||
}
|
||||
th{
|
||||
color: #444;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px dotted #666;
|
||||
}
|
||||
|
||||
td{
|
||||
border-bottom: 1px dotted #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
|
||||
|
||||
|
||||
.preferences{
|
||||
&__inside-content--tabable{
|
||||
margin-left: -25px;
|
||||
margin-right: -25px;
|
||||
}
|
||||
|
||||
&__inside-content{
|
||||
|
||||
.#{$ns}-tab-list{
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
padding-left: 15px;
|
||||
|
||||
.#{$ns}-tab{
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preferences__sidebar{
|
||||
background: #fdfdfd;
|
||||
min-width: 210px;
|
||||
max-width: 210px;
|
||||
|
||||
&-head{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
height: 70px;
|
||||
padding: 0 22px;
|
||||
|
||||
h2{
|
||||
font-size: 22px;
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu{
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
|
||||
.#{$ns}-menu-item{
|
||||
padding: 10px 18px;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
|
||||
|
||||
|
||||
.dashboard__insider--view-form{
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
|
||||
.view-form--name-section{
|
||||
margin-left: -25px;
|
||||
margin-right: -25px;
|
||||
}
|
||||
}
|
||||
.view-form{
|
||||
|
||||
&--name-section{
|
||||
padding: 35px 28px;
|
||||
background: #fbfafa;
|
||||
margin-bottom: 22px;
|
||||
|
||||
.bp3-form-group.bp3-inline{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--logic-expression-section{
|
||||
padding: 20px 25px;
|
||||
margin: 1rem -25px 1.5rem;
|
||||
background: #fbfafa;
|
||||
|
||||
.#{$ns}-form-group{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.condition-number{
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.#{$ns}-form-group.#{$ns}-inline{
|
||||
|
||||
.#{$ns}-label{
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.#{$ns}-form-content{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.new-conditional-btn{
|
||||
|
||||
}
|
||||
|
||||
.dragable-columns{
|
||||
|
||||
&__items{
|
||||
border: 1px solid #e1e1e1;
|
||||
padding: 10px 8px;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&__title{
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.dragable-columns{
|
||||
&__column{
|
||||
|
||||
.bp3-input-group .bp3-input{
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
&__arrows{
|
||||
text-align: center;
|
||||
margin-top: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
.dragable-resource-columns{
|
||||
|
||||
}
|
||||
|
||||
&__role-conditional{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user