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

feat: dashboard style.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-04-12 12:03:45 +02:00
parent 6dcff7e4c2
commit 37fb5a6f11
24 changed files with 517 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/style/objects/buttons.scss
View File

@@ -6,7 +6,6 @@
.bp3-popover-target{
width: 100%;
}
.bp3-button{
width: 100%;
justify-content: space-between;
@@ -18,7 +17,6 @@
.form-group--select-list{
.bp3-popover-open{
.bp3-button{
border-color: #80bdff;
}
@@ -32,13 +30,18 @@
color: #555555;
box-shadow: 0 0 0 transparent;
&:hover,
&:focus{
background-color: #CFDCEE;
}
&.bp3-small{
font-size: 13px;
min-height: 29px;
}
.form-group--select-list &{
border-radius: 0;
border-radius: 2px;
&,
&:hover{
@@ -47,6 +50,12 @@
border: 1px solid #ced4da;
}
}
.form-group--select-list.bp3-intent-danger &{
&{
border-color: #db3737;
}
}
}
.bp3-button{

105
client/src/style/objects/form.scss
View File

@@ -1,3 +1,6 @@
$form-check-input-checked-color: #fff;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M12,5c-0.28,0-0.53,0.11-0.71,0.29L7,9.59L4.71,7.29C4.53,7.11,4.28,7,4,7C3.45,7,3,7.45,3,8c0,0.28,0.11,0.53,0.29,0.71l3,3C6.47,11.89,6.72,12,7,12s0.53-0.11,0.71-0.29l5-5C12.89,6.53,13,6.28,13,6C13,5.45,12.55,5,12,5z'/></g></g></svg>") !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M11,7H5C4.45,7,4,7.45,4,8c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1C12,7.45,11.55,7,11,7z'/></g></g></svg>") !default;
.form{
&__floating-footer{
@@ -12,14 +15,19 @@
}
// Form
label{
.bp3-label{
color: #353535;
font-weight: 400;
.required{
color: red;
}
}
.#{$ns}-input{
box-shadow: 0 0 0 transparent;
border: 1px solid #ced4da;
border-radius: 0;
border-radius: 2px;
height: 32px;
line-height: 32px;
color: #333;
@@ -44,7 +52,12 @@ label{
}
.bp3-input{
border-color: #db3737;
border-color: rgb(219, 55, 55);
box-shadow: 0 0 0 0 transparent;
&:focus{
box-shadow: 0 0 0 0.2rem rgba(219, 55, 55, 0.25);
}
}
}
@@ -107,12 +120,32 @@ label{
}
@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 {
@@ -157,6 +190,8 @@ label{
}
}
&:hover .#{$ns}-control-indicator {
background-color: transparent;
}
@@ -165,7 +200,62 @@ label{
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;
}
input:checked ~ .#{$ns}-control-indicator {
background-image: escape-svg($form-check-input-checked-bg-image);
border-color: #137cbd;
background-color: #137cbd;
}
input:indeterminate ~ .#{$ns}-control-indicator {
background-image: escape-svg($form-check-input-indeterminate-bg-image);
border-color: #137cbd;
background-color: #137cbd;
box-shadow: 0 0 0 0 transparent;
}
}
/*
Radio
@@ -184,6 +274,7 @@ label{
Styleguide radio
*/
&.#{$ns}-radio {
.#{$ns}-control-indicator{
border: 2px solid #cecece;