some more buttons and inputs
This commit is contained in:
parent
9179563f39
commit
a6c4e7353b
6 changed files with 87 additions and 31 deletions
|
@ -13,13 +13,6 @@
|
||||||
@include btn;
|
@include btn;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.invert {
|
|
||||||
color: var(--#{$prefix}-base) !important;
|
|
||||||
}
|
|
||||||
.btn.invert:hover {
|
|
||||||
color: var(--#{$prefix}-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-sm {
|
.btn-sm {
|
||||||
@include btn;
|
@include btn;
|
||||||
padding: 4px 8px 4px 8px;
|
padding: 4px 8px 4px 8px;
|
||||||
|
@ -37,6 +30,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$button_sizes: (
|
||||||
|
"btn",
|
||||||
|
"btn-sm",
|
||||||
|
);
|
||||||
|
|
||||||
|
@each $s in $button_sizes {
|
||||||
|
.#{$s}.invert {
|
||||||
|
color: var(--#{$prefix}-base) !important;
|
||||||
|
}
|
||||||
|
.#{$s}.invert:hover {
|
||||||
|
color: var(--#{$prefix}-text) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.borderless-btn {
|
.borderless-btn {
|
||||||
@include btn;
|
@include btn;
|
||||||
color: var(--#{$prefix}-text);
|
color: var(--#{$prefix}-text);
|
||||||
|
@ -60,14 +68,3 @@
|
||||||
background-color: var(--#{$prefix}-surface0);
|
background-color: var(--#{$prefix}-surface0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
$colors: (
|
|
||||||
"green",
|
|
||||||
);
|
|
||||||
|
|
||||||
@each $color in $colors {
|
|
||||||
.btn.#{$color} {
|
|
||||||
background-color: var(--#{$prefix}-#{$color});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
@ -195,3 +195,61 @@ table.table-striped {
|
||||||
.select.border {
|
.select.border {
|
||||||
border: 2pt solid var(--#{$prefix}-text);
|
border: 2pt solid var(--#{$prefix}-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-sizer {
|
||||||
|
display: inline-grid;
|
||||||
|
vertical-align: top;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
border: solid 1px;
|
||||||
|
padding: .25em .5em;
|
||||||
|
margin: 5px;
|
||||||
|
|
||||||
|
&.stacked {
|
||||||
|
padding: .5em;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
&::after,
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
grid-area: 2 / 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after,
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
width: auto;
|
||||||
|
min-width: 1em;
|
||||||
|
grid-area: 1 / 2;
|
||||||
|
font: inherit;
|
||||||
|
padding: 0.25em;
|
||||||
|
margin: 0;
|
||||||
|
resize: none;
|
||||||
|
background: none;
|
||||||
|
appearance: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: attr(data-value) ' ';
|
||||||
|
visibility: hidden;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
outline: solid 1px blue;
|
||||||
|
box-shadow: 4px 4px 0px blue;
|
||||||
|
|
||||||
|
> span { color: blue; }
|
||||||
|
|
||||||
|
textarea:focus,
|
||||||
|
input:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -38,9 +38,3 @@
|
||||||
.tc-text {
|
.tc-text {
|
||||||
color: var(--#{$prefix}-text);
|
color: var(--#{$prefix}-text);
|
||||||
}
|
}
|
||||||
.c-s0 {
|
|
||||||
background-color: var(--#{$prefix}-surface0);
|
|
||||||
}
|
|
||||||
.c-s1 {
|
|
||||||
background-color: var(--#{$prefix}-surface1);
|
|
||||||
}
|
|
||||||
|
|
|
@ -58,6 +58,9 @@ function register_handlers() {
|
||||||
register_dropdowns();
|
register_dropdowns();
|
||||||
document.querySelector("#open-draft").addEventListener("click", open_drafts);
|
document.querySelector("#open-draft").addEventListener("click", open_drafts);
|
||||||
document.querySelector("#close-transaction-pane").addEventListener("click", close_drafts);
|
document.querySelector("#close-transaction-pane").addEventListener("click", close_drafts);
|
||||||
|
document.querySelector(".input-sizer > input").addEventListener("input", (event) => {
|
||||||
|
event.target.parentNode.dataset.value = event.target.value
|
||||||
|
});
|
||||||
close_new_transaction_pane();
|
close_new_transaction_pane();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -46,20 +46,25 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="p-5 mx-auto">
|
<div class="p-5 mx-auto">
|
||||||
<label>
|
<label class="input-sizer">
|
||||||
Tag:
|
<span>Tag: </span>
|
||||||
<input class="input" id="trans-tab-entry" type="text" disabled="disabled" />
|
<input
|
||||||
|
size="4"
|
||||||
|
class="input"
|
||||||
|
id="trans-tab-entry"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="ms-5 d-flex">
|
<div class="ms-5 d-flex">
|
||||||
<h2>Breakdown</h2>
|
<h2 class="my-3">Breakdown</h2>
|
||||||
<button class="btn-sm ms-5 my-auto positive">
|
<button class="btn-sm ms-5 my-auto c-green invert">
|
||||||
<i class="" data-feather="plus"></i>
|
<i class="" data-feather="plus"></i>
|
||||||
<span class="my-auto pe-2">New</span>
|
<span class="my-auto pe-2">New</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="btn-sm ms-5 my-auto positive">
|
<button class="btn-sm ms-5 my-auto c-green invert">
|
||||||
<i class="" data-feather="plus"></i>
|
<i class="" data-feather="plus"></i>
|
||||||
<span class="my-auto pe-2">Tax</span>
|
<span class="my-auto pe-2">Tax</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -63,7 +63,6 @@ templ TransactionsPage(userID int, accounts *[]string) {
|
||||||
>Add
|
>Add
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="ms-5 borderless-btn">
|
<button class="ms-5 borderless-btn">
|
||||||
|
|
Loading…
Reference in a new issue