fix some buttons, focus shadow

This commit is contained in:
Michael Shamoon 2022-03-08 15:22:17 -08:00
parent 4babf0d102
commit 383cf7f4d5
6 changed files with 26 additions and 11 deletions
src-ui/src
app/components
app-frame
manage
correspondent-list/correspondent-edit-dialog
document-type-list/document-type-edit-dialog
tag-list/tag-edit-dialog
theme.scsstheme_dark.scss

@ -170,8 +170,7 @@
} }
&:focus { &:focus {
background-color: #fff; background-color: rgba(0, 0, 0, 0.3);
color: #212529;
flex-grow: 1; flex-grow: 1;
padding-left: 0.5rem; padding-left: 0.5rem;
} }

@ -11,7 +11,7 @@
<app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></app-input-check> <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></app-input-check>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button> <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
<button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button> <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
</div> </div>
</form> </form>

@ -13,7 +13,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button> <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
<button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button> <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
</div> </div>
</form> </form>

@ -15,7 +15,7 @@
<app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check> <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button> <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
<button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button> <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
</div> </div>
</form> </form>

@ -1,10 +1,9 @@
:root { :root {
// base color e.g. #17541f = hsl(128, 57%, 21%) // base color e.g. #17541f = hsl(128, 57%, 21%)
--ngx-green: 128, 57%; --ngx-green: 128, 57%;
--l:21%; --l: 21%;
--bs-primary: hsl(var(--ngx-green),var(--l)); --bs-primary: hsl(var(--ngx-green), var(--l));
--bs-primary-rgb: rgba(hsl(var(--ngx-green), var(--l)));
--ngx-primary-faded: #d1ddd2; --ngx-primary-faded: #d1ddd2;
--ngx-primary-lighten-10: hsl(var(--ngx-green), calc(var(--l) + 10%)); --ngx-primary-lighten-10: hsl(var(--ngx-green), calc(var(--l) + 10%));
--ngx-primary-lighten-30: hsl(var(--ngx-green), calc(var(--l) + 30%)); --ngx-primary-lighten-30: hsl(var(--ngx-green), calc(var(--l) + 30%));
@ -59,6 +58,13 @@ svg.logo {
} }
} }
.btn:focus,
.dropdown-item:focus,
.btn-check:focus + .btn,
.form-control:focus {
box-shadow: 0 0 0 0.25rem hsla(var(--ngx-green), var(--l), 0.7);
}
.dropdown.show { .dropdown.show {
> .btn-primary { > .btn-primary {
background-color: var(--bs-primary); background-color: var(--bs-primary);
@ -154,7 +160,7 @@ textarea,
background-color: var(--bs-body-bg); background-color: var(--bs-body-bg);
border-color: var(--bs-border-color); border-color: var(--bs-border-color);
&:hover { &:hover, &:focus {
background-color: var(--bs-body-bg); background-color: var(--bs-body-bg);
} }
} }
@ -173,6 +179,10 @@ textarea,
background-color: var(--bs-body-bg); background-color: var(--bs-body-bg);
color: var(--bs-body-color); color: var(--bs-body-color);
} }
&.active {
background-color: var(--bs-primary);
}
} }
} }
@ -195,3 +205,9 @@ table.table {
.ngx-file-drop__drop-zone--over { .ngx-file-drop__drop-zone--over {
background-color: var(--ngx-primary-darken-25) background-color: var(--ngx-primary-darken-25)
} }
.ngb-dp-header,
.ngb-dp-weekdays,
.ngb-dp-month {
background-color: var(--bs-body-bg);
}

@ -53,7 +53,7 @@ $border-color-dark-mode: #47494f;
border-bottom: 1px solid var(--bs-border-color) !important; border-bottom: 1px solid var(--bs-border-color) !important;
} }
.text-dark { .text-dark, .text-light {
color: var(--bs-body-color) !important; color: var(--bs-body-color) !important;
} }