QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 12:50:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improvements to bank matching transactions

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-07-06 19:10:07 +02:00
parent cd9039fe16
commit b7487f19d3
18 changed files with 188 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
packages/webapp/src/style/objects/form.scss
View File

@@ -271,203 +271,6 @@ label.bp4-label {
.select-list--tooltip-items .bp4-popover-target {
display: block;
}
@mixin control-checked-colors($selector: ':checked') {
input#{$selector}~.#{$ns}-control-indicator {
box-shadow: none;
background-color: $control-checked-background-color;
color: $white;
}
&:hover input#{$selector}~.#{$ns}-control-indicator {
box-shadow: none;
background-color: $control-checked-background-color-hover;
border-color: $control-checked-background-color-active;
}
input:not(:disabled):active#{$selector}~.#{$ns}-control-indicator {
box-shadow: none;
background-color: $control-checked-background-color-active;
border-color: $control-checked-background-color-active;
}
input:disabled#{$selector}~.#{$ns}-control-indicator {
box-shadow: none;
background: rgba($control-checked-background-color, 0.5);
}
}
///@extend
.#{$ns}-control {
input:checked~.#{$ns}-control-indicator {
box-shadow: none;
background-color: transparent;
background-image: none;
}
&:hover input:checked~.#{$ns}-control-indicator {
box-shadow: none;
background-color: transparent;
}
input:not(:disabled):active:checked~.#{$ns}-control-indicator {
box-shadow: none;
background: transparent;
}
input:disabled:checked~.#{$ns}-control-indicator {
box-shadow: none;
background: transparent;
}
&.#{$ns}-disabled {
cursor: not-allowed;
color: $pt-text-color-disabled;
}
&.#{$ns}-inline {
display: inline-block;
margin-right: $pt-grid-size * 2;
}
.#{$ns}-control-indicator {
box-shadow: 0 0 0 transparent;
background-clip: padding-box;
background-color: transparent;
background-image: none;
width: 18px;
height: 18px;
&::before {
width: 18px;
height: 18px;
}
}
&.bp4-large .#{$ns}-control-indicator {
width: 20px;
height: 20px;
&::before {
width: 20px;
height: 20px;
}
}
&:hover .#{$ns}-control-indicator {
background-color: transparent;
}
input:not(:disabled):active~.#{$ns}-control-indicator {
box-shadow: 0 0 0 transparent;
background: transparent;
}
/*
Checkbox
Markup:
<label class="#{$ns}-control #{$ns}-checkbox {{.modifier}}">
<input type="checkbox" {{:modifier}} />
<span class="#{$ns}-control-indicator"></span>
Checkbox
</label>
:checked - Checked
:disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
:indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
<code>input.indeterminate = true</code>.
.#{$ns}-align-right - Right-aligned indicator
.#{$ns}-large - Large
Styleguide checkbox
*/
&.#{$ns}-checkbox {
&:hover input:indeterminate~.#{$ns}-control-indicator {
// box-shadow: 0 0 0 transparent;
}
@mixin indicator-inline-icon($icon) {
&::before {
// embed SVG icon image as backgroud-image above gradient.
// the SVG image content is inlined into the CSS, so use this sparingly.
height: 100%;
width: 100%;
}
}
@include control-checked-colors(':checked');
// make :indeterminate look like :checked _for Checkbox only_
@include control-checked-colors(':indeterminate');
.#{$ns}-control-indicator {
border: 1px solid #c6c6c6;
border-radius: $pt-border-radius;
background-color: #fff;
}
input:checked~.#{$ns}-control-indicator {
background-image: escape-svg($form-check-input-checked-bg-image);
border-color: $form-check-input-checked-bg-color;
background-color: $form-check-input-checked-bg-color;
}
input:indeterminate~.#{$ns}-control-indicator {
// background-image: escape-svg($form-check-input-indeterminate-bg-image);
border-color: $form-check-input-checked-bg-color;
background-color: $form-check-input-checked-bg-color;
box-shadow: 0 0 0 0 transparent;
}
}
/*
Radio
Markup:
<label class="#{$ns}-control #{$ns}-radio {{.modifier}}">
<input type="radio" name="docs-radio-regular" {{:modifier}} />
<span class="#{$ns}-control-indicator"></span>
Radio
</label>
:checked - Selected
:disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
.#{$ns}-align-right - Right-aligned indicator
.#{$ns}-large - Large
Styleguide radio
*/
&.#{$ns}-radio {
.#{$ns}-control-indicator {
border: 2px solid #cecece;
background-color: #fff;
&::before {
height: 14px;
width: 14px;
}
}
input:checked~.#{$ns}-control-indicator {
border-color: $form-check-input-checked-bg-color;
&::before {
background-image: radial-gradient($form-check-input-checked-bg-color 40%,
transparent 40%);
}
}
input:checked:disabled~.#{$ns}-control-indicator::before {
opacity: 0.5;
}
input:focus~.#{$ns}-control-indicator {
-moz-outline-radius: $control-indicator-size;
}
}
}
.bp4-menu-item::before,
.bp4-menu-item>.bp4-icon {
color: #4b5d6b;