mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 13:50:31 +00:00
feat: scss architecture.
This commit is contained in:
Ahmed Bouhuolia
@@ -9,851 +9,34 @@ $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22,
|
||||
$menu-item-color-hover: $light-gray4;
|
||||
$menu-item-color-active: $light-gray3;
|
||||
|
||||
|
||||
// Blueprint framework.
|
||||
@import "@blueprintjs/core/src/blueprint.scss";
|
||||
@import "@blueprintjs/table/src/table.scss";
|
||||
@import "@blueprintjs/datetime/src/blueprint-datetime.scss";
|
||||
|
||||
@import "basscss";
|
||||
|
||||
|
||||
@import "pages/authentication.scss";
|
||||
|
||||
$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
|
||||
|
||||
// Objects
|
||||
@import "objects/form";
|
||||
@import "objects/typography";
|
||||
|
||||
// Breadcrumbs component.
|
||||
.#{$ns}-breadcrumbs-collapsed{
|
||||
background: $light-gray3;
|
||||
// Components
|
||||
@import "components/data-table";
|
||||
@import "components/dialog";
|
||||
|
||||
&:hover{
|
||||
background: $light-gray2;
|
||||
}
|
||||
}
|
||||
// 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";
|
||||
|
||||
// Tabs component.
|
||||
.#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator{
|
||||
height: 2px;
|
||||
}
|
||||
.#{$ns}-large > .#{$ns}-tab{
|
||||
line-height: 50px;
|
||||
font-size: 15px;
|
||||
}
|
||||
// Views
|
||||
@import "views/filter-dropdown";
|
||||
@import "views/sidebar";
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$sidebar-background: #01194E;
|
||||
$sidebar-text-color: #fff;
|
||||
$sidebar-width: 220px;
|
||||
$sidebar-menu-item-color: #E9EBF7;
|
||||
|
||||
$sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
|
||||
.sidebar{
|
||||
background: $sidebar-background;
|
||||
color: $sidebar-text-color;
|
||||
width: $sidebar-width;
|
||||
|
||||
&__head{
|
||||
padding: 16px 10px;
|
||||
|
||||
&-company-meta{
|
||||
|
||||
.company-name{
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.company-meta{
|
||||
color: #A7AFC2;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-menu{
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
min-width: $sidebar-width;
|
||||
border-radius: 0;
|
||||
|
||||
.#{$ns}-menu-item{
|
||||
color: $sidebar-menu-item-color;
|
||||
border-radius: 0;
|
||||
padding: 10px 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 200;
|
||||
|
||||
&:hover{
|
||||
background: #012470;
|
||||
}
|
||||
&:focus,
|
||||
&:active{
|
||||
background: #01143e;
|
||||
}
|
||||
|
||||
> .#{$ns}-icon{
|
||||
color: #767B9B;
|
||||
margin-right: 12px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> .#{$ns}-icon-caret-right{
|
||||
margin-right: -2px;
|
||||
margin-top: 2px;
|
||||
color: #767B9B;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-submenu{
|
||||
|
||||
.#{$ns}-menu{
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
background: $sidebar-popover-submenu-bg;
|
||||
border-radius: 0;
|
||||
|
||||
&-item{
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
font-size: 14px;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus{
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-popover{
|
||||
padding: 0;
|
||||
|
||||
&-content{
|
||||
box-shadow: 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item{
|
||||
color: $sidebar-menu-item-color;
|
||||
}
|
||||
.#{$ns}-menu-divider{
|
||||
border-top-color: #183C86;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar--dashboard-views{
|
||||
box-shadow: 0 0 0;
|
||||
border-bottom: 1px solid #EAEAEA;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dialog
|
||||
.#{$ns}-dialog{
|
||||
background: #fff;
|
||||
|
||||
&-header{
|
||||
background: #ebf1f5;
|
||||
}
|
||||
}
|
||||
|
||||
// Form
|
||||
label{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.#{$ns}-input{
|
||||
box-shadow: 0 0 0 0 rgba(19, 124, 189, 0),
|
||||
0 0 0 0 rgba(19, 124, 189, 0),
|
||||
inset 0 0 0 1px rgba(16, 22, 26, 0.1),
|
||||
inset 0 1px 1px rgba(16, 22, 26, 0.15);
|
||||
}
|
||||
|
||||
.#{$ns}-heading{
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
// Dialog Account Form.
|
||||
.dialog--account-form{
|
||||
|
||||
.#{$ns}-form-group{
|
||||
.#{$ns}-label{
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider{
|
||||
border-top: 1px solid #e8e8e8;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#root{
|
||||
// Essential JS 2 Datatable.
|
||||
.e-grid{
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
|
||||
.e-headercell,
|
||||
.e-detailheadercell{
|
||||
background-color: #F8FAFA;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
.e-headercelldiv{
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.e-rowcell{
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.e-rowcell:not(.e-editedbatchcell),
|
||||
.e-detailrowcollapse:not(.e-editedbatchcell),
|
||||
.e-detailrowexpand:not(.e-editedbatchcell),
|
||||
.e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell),
|
||||
.e-emptyrow:not(.e-editedbatchcell){
|
||||
color: #333;
|
||||
}
|
||||
&.e-gridhover tr[role="row"]:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
|
||||
&.e-gridhover tr[role="row"]:hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
|
||||
&.e-gridhover tr[role="row"]:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
|
||||
&.e-rtl .e-gridhover tr[role="row"]:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
|
||||
&.e-gridhover tr[role="row"]:hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell){
|
||||
background: #F8FAFA;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.e-spinner-pane .e-spinner-inner .e-spin-material {
|
||||
stroke: #999;
|
||||
}
|
||||
.e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop){
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.#{$ns}-button--action{
|
||||
background: #E6EFFB;
|
||||
border: 0;
|
||||
box-shadow: 0 0 0;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__insider--expense-form{
|
||||
padding: 40px 20px;
|
||||
|
||||
.#{$ns}-form-group{
|
||||
margin-bottom: 22px;
|
||||
|
||||
.#{$ns}-label{
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
.#{$ns}-form-content{
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form{
|
||||
&__floating-footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 220px;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 14px 16px;
|
||||
border-top: 1px solid #ececec;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__insider--view-form{
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
|
||||
.view-form--name-section{
|
||||
margin-left: -25px;
|
||||
margin-right: -25px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-form-group{
|
||||
|
||||
&.#{$ns}-intent-danger{
|
||||
select{
|
||||
box-shadow: 0 0 0 0 rgba(219, 55, 55, 0),
|
||||
0 0 0 0 rgba(219, 55, 55, 0),
|
||||
inset 0 0 0 1px #db3737,
|
||||
inset 0 0 0 1px rgba(16, 22, 26, 0.15),
|
||||
inset 0 1px 1px rgba(16, 22, 26, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bigcapital-datatable{
|
||||
|
||||
table {
|
||||
text-align: left;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
|
||||
thead{
|
||||
th{
|
||||
height: 48px;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: #F8FAFA;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
|
||||
border-bottom: 1px solid rgb(224, 224, 224);
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
:last-child {
|
||||
td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.financial-statement{
|
||||
|
||||
&__header{
|
||||
padding: 30px;
|
||||
background: #FDFDFD;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.financial-statement{
|
||||
|
||||
&__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{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.filter-dropdown{
|
||||
width: 500px;
|
||||
|
||||
&__body{
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
&__condition{
|
||||
display: flex;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-form-group{
|
||||
padding-right: 16px;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer{
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.form-group{
|
||||
&--condition{ width: 25%; }
|
||||
&--field{ width: 45%; }
|
||||
&--compatator{ width: 30%; }
|
||||
&--value{ width: 25%; }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user