some stuff with button styeling
This commit is contained in:
Nickiel12
parent
37d351e23d
commit
9179563f39
6 changed files with 149 additions and 83 deletions
73
web/sass/buttons.scss
Normal file
73
web/sass/buttons.scss
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
|
||||
@mixin btn() {
|
||||
display: flex;
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
padding: 10px 15px 10px 15px;
|
||||
border-radius: 20px;
|
||||
transition: all 0.1s linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include btn;
|
||||
}
|
||||
|
||||
.btn.invert {
|
||||
color: var(--#{$prefix}-base) !important;
|
||||
}
|
||||
.btn.invert:hover {
|
||||
color: var(--#{$prefix}-text) !important;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@include btn;
|
||||
padding: 4px 8px 4px 8px;
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-sm {
|
||||
padding: 4px 8px 4px 8px;
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.borderless-btn {
|
||||
@include btn;
|
||||
color: var(--#{$prefix}-text);
|
||||
background-color: var(--#{$prefix}-surface2);
|
||||
}
|
||||
.borderless-btn:hover {
|
||||
background-color: var(--#{$prefix}-overlay1);
|
||||
color: var(--#{$prefix}-nav-active-color);
|
||||
}
|
||||
|
||||
.exit-btn {
|
||||
@include btn;
|
||||
color: var(--#{$prefix}-text);
|
||||
padding: 11px 11px 11px 11px;
|
||||
border-radius: $border-radius;
|
||||
background-color: var(--#{$prefix}-crust);
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
.exit-btn:hover {
|
||||
background-color: var(--#{$prefix}-surface0);
|
||||
}
|
||||
|
||||
|
||||
$colors: (
|
||||
"green",
|
||||
);
|
||||
|
||||
@each $color in $colors {
|
||||
.btn.#{$color} {
|
||||
background-color: var(--#{$prefix}-#{$color});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,9 +1 @@
|
|||
@mixin button_link() {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ $border-radius: 8px;
|
|||
@import 'utility-classes';
|
||||
@import 'mixins';
|
||||
@import 'nav';
|
||||
@import 'buttons';
|
||||
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -106,13 +106,6 @@ $w_h_sizes: (
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-c-invert {
|
||||
color: var(--#{$prefix}-base) !important;
|
||||
}
|
||||
.btn-c-invert:hover {
|
||||
color: var(--#{$prefix}-text) !important;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: var(--#{$prefix}-green);
|
||||
}
|
||||
|
|
@ -120,43 +113,6 @@ $w_h_sizes: (
|
|||
color: var(--#{$prefix}-red);
|
||||
}
|
||||
|
||||
.borderless-btn.btn-sm {
|
||||
padding: 4px 8px 4px 8px;
|
||||
}
|
||||
|
||||
.borderless-btn {
|
||||
display: flex;
|
||||
color: var(--#{$prefix}-text);
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
padding: 10px 15px 10px 15px;
|
||||
border-radius: 20px;
|
||||
background-color: var(--#{$prefix}-surface2);
|
||||
transition: all 0.1s linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
.borderless-btn:hover {
|
||||
background-color: var(--#{$prefix}-overlay1);
|
||||
color: var(--#{$prefix}-nav-active-color);
|
||||
}
|
||||
|
||||
.exit-btn {
|
||||
display: flex;
|
||||
color: var(--#{$prefix}-text);
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
padding: 11px 11px 11px 11px;
|
||||
border-radius: $border-radius;
|
||||
background-color: var(--#{$prefix}-crust);
|
||||
transition: all 0.1s linear;
|
||||
cursor: pointer;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
.exit-btn:hover {
|
||||
background-color: var(--#{$prefix}-surface0);
|
||||
}
|
||||
|
||||
table.table {
|
||||
color: var(--#{$prefix}-text);
|
||||
td {
|
||||
|
|
@ -214,29 +170,28 @@ table.table-striped {
|
|||
border-width: thin;
|
||||
transition: max-height 0.2s linear;
|
||||
|
||||
input {
|
||||
width: 5em;
|
||||
font-size: 1em;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
border-radius: $border-radius;
|
||||
border-style: solid;
|
||||
border-color: var(--#{$prefix}-text);
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 10em;
|
||||
font-size: 1em;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
border-radius: $border-radius;
|
||||
border-style: solid;
|
||||
border-color: var(--#{$prefix}-text);
|
||||
padding-top: 2px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.select {
|
||||
border: none;
|
||||
font-size: 1em;
|
||||
border-radius: $border-radius;
|
||||
background-color: var(--#{$prefix}-mantle);
|
||||
background-color: var(--#{$prefix}-base);
|
||||
color: var(--#{$prefix}-text);
|
||||
}
|
||||
|
||||
.select.border {
|
||||
border: 2pt solid var(--#{$prefix}-text);
|
||||
}
|
||||
|
||||
.select.light {
|
||||
background-color: var(--#{$prefix}-base);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,18 +19,54 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
|
|||
</button>
|
||||
}
|
||||
</div>
|
||||
<div class="c-mantle cr-all m-5 d-flex" style="height:85%">
|
||||
<div class="p-5 mx-auto">
|
||||
<label for="acnt-selection" id="acnt-selection-label">Account: </label>
|
||||
<select class="ms-2 select light border" id="acnt-selection" value="">
|
||||
for _, value := range *acnts {
|
||||
<option value={strconv.Itoa(value.Id)}>{value.DisplayName.String}</option>
|
||||
}
|
||||
</select>
|
||||
<div class="c-mantle cr-all m-5 container" style="height: 85%;">
|
||||
<div class="row mt-5">
|
||||
<div class="p-5 mx-auto">
|
||||
<label for="acnt-entry-selection" id="acnt-entry-label">
|
||||
Account:
|
||||
</label>
|
||||
<select class="ms-2 select border" id="acnt-entry-selection">
|
||||
for _, value := range *acnts {
|
||||
<option value={strconv.Itoa(value.Id)}>{value.DisplayName.String}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="p-5 mx-auto" style="height: fit-content;">
|
||||
<label>
|
||||
Date:
|
||||
<input class="input" id="date-entry" type="date" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="p-5 mx-auto" style="height: fit-content;">
|
||||
<label>
|
||||
Amount:
|
||||
<input class="input" id="amount-entry" type="number" step="any" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 mx-auto">
|
||||
<label for="acnt-date" id="data-selection-label">Date: </label>
|
||||
<input id="acnt-date" type="date" />
|
||||
<div class="row">
|
||||
<div class="p-5 mx-auto">
|
||||
<label>
|
||||
Tag:
|
||||
<input class="input" id="trans-tab-entry" type="text" disabled="disabled" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="ms-5 d-flex">
|
||||
<h2>Breakdown</h2>
|
||||
<button class="btn-sm ms-5 my-auto positive">
|
||||
<i class="" data-feather="plus"></i>
|
||||
<span class="my-auto pe-2">New</span>
|
||||
</button>
|
||||
<button class="btn-sm ms-5 my-auto positive">
|
||||
<i class="" data-feather="plus"></i>
|
||||
<span class="my-auto pe-2">Tax</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="flex-grow: 1">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,25 +19,25 @@ templ TransactionsPage(userID int, accounts *[]string) {
|
|||
<select class="select-swapout select">
|
||||
<option data-select-div="filter-accounts">Account</option>
|
||||
<option data-select-div="filter-two-inputs">Amount</option>
|
||||
<option data-select-div="filter-two-inputs">Date</option>
|
||||
<option data-select-div="filter-between-dates">Date</option>
|
||||
<option data-select-div="filter-contains">Description</option>
|
||||
<option data-select-div="filter-two-inputs">ID</option>
|
||||
</select>
|
||||
<div id="filter-two-inputs" class="d-flex" style="display: none;">
|
||||
<input type="text"></input>
|
||||
<input class="input" type="text"></input>
|
||||
<select class="ms-2 select">
|
||||
<option>></option>
|
||||
<option>=</option>
|
||||
<option>{"<"}</option>
|
||||
</select>
|
||||
<input class="ms-2" type="text"></input>
|
||||
<input class="ms-2 input" type="text"></input>
|
||||
</div>
|
||||
<div id="filter-contains" class="d-flex" style="display: none;">
|
||||
<select class="ms-2 select">
|
||||
<option>Contains</option>
|
||||
<option>Does Not Contain</option>
|
||||
</select>
|
||||
<input class="ms-2" type="text"></input>
|
||||
<input class="ms-2 input" type="text"></input>
|
||||
</div>
|
||||
<div id="filter-accounts" class="d-flex">
|
||||
<select class="ms-2 select">
|
||||
|
|
@ -49,8 +49,17 @@ templ TransactionsPage(userID int, accounts *[]string) {
|
|||
}
|
||||
</select>
|
||||
</div>
|
||||
<div id="filter-between-dates" class="d-flex" style="display: none;">
|
||||
<input class="input" type="date"></input>
|
||||
<select class="ms-2 select">
|
||||
<option>></option>
|
||||
<option>=</option>
|
||||
<option>{"<"}</option>
|
||||
</select>
|
||||
<input class="ms-2 input" type="date"></input>
|
||||
</div>
|
||||
<button
|
||||
class="cr-all ms-3 borderless-btn btn-sm btn-c-invert c-green"
|
||||
class="cr-all ms-3 btn btn-sm invert c-green"
|
||||
>Add
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue