mirror of
https://github.com/FJurmanovic/wallet-web.git
synced 2026-02-06 06:08:10 +00:00
styled wallet headers and transaction tables
This commit is contained in:
Fran Jurmanović
57
src/styles/app-pagination/app-pagination.scss
Normal file
57
src/styles/app-pagination/app-pagination.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
app-pagination {
|
||||
.app-pagination {
|
||||
table.transactions-table {
|
||||
margin: 0 0 3em 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: $gray-09;
|
||||
border: 1px solid $gray-09;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
tr {
|
||||
background-color: $gray-07;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
margin: 6px 8px;
|
||||
td,
|
||||
th {
|
||||
margin: 0 12px;
|
||||
overflow: hidden; // Or flex might break
|
||||
list-style: none;
|
||||
&.--left {
|
||||
text-align: left;
|
||||
}
|
||||
&.--right {
|
||||
text-align: right;
|
||||
}
|
||||
&.balance-cell {
|
||||
.balance {
|
||||
display: inline;
|
||||
&.--positive {
|
||||
color: $green-01;
|
||||
}
|
||||
&.--negative {
|
||||
color: $red-01;
|
||||
}
|
||||
}
|
||||
.currency {
|
||||
display: inline;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.paginate {
|
||||
position: relative;
|
||||
height: 33px;
|
||||
margin-bottom: 7px;
|
||||
.--footer {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
src/styles/app-pagination/index.scss
Normal file
1
src/styles/app-pagination/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import './app-pagination.scss';
|
||||
@@ -1,207 +1,208 @@
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: $border-width $border-style transparent;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-semibold;
|
||||
border-radius: 0.25em;
|
||||
appearance: none;
|
||||
line-height: 20px;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: $border-width $border-style transparent;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-semibold;
|
||||
border-radius: 0.25em;
|
||||
appearance: none;
|
||||
line-height: 20px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled="true"] {
|
||||
cursor: default;
|
||||
background-position: 0 0;
|
||||
}
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled='true'] {
|
||||
cursor: default;
|
||||
background-position: 0 0;
|
||||
background-color: $gray-08 !important;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected="true"] {
|
||||
background-image: none;
|
||||
}
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected='true'] {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.btn-squared {
|
||||
border-radius: 0;
|
||||
}
|
||||
&.btn-squared {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.btn-rounder {
|
||||
border-radius: 2em;
|
||||
}
|
||||
&.btn-rounder {
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
@each $color, $value in $button-map {
|
||||
&.btn-#{$color} {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
&:hover {
|
||||
background-color: darken(nth($value, 1), 10%);
|
||||
color: lighten(nth($value, 2), 5%);
|
||||
}
|
||||
@each $color, $value in $button-map {
|
||||
&.btn-#{$color} {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
&:hover {
|
||||
background-color: darken(nth($value, 1), 10%);
|
||||
color: lighten(nth($value, 2), 5%);
|
||||
}
|
||||
|
||||
&-transparent {
|
||||
background: transparent;
|
||||
color: $black;
|
||||
&:hover {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-transparent {
|
||||
background: transparent;
|
||||
color: $black;
|
||||
&:hover {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-link {
|
||||
color: $blue-07;
|
||||
text-decoration: none;
|
||||
&.btn-link {
|
||||
color: $blue-07;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
&.btn-sm {
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
padding: 14px 1.25em;
|
||||
font-size: inherit;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&.btn-lg {
|
||||
padding: 14px 1.25em;
|
||||
font-size: inherit;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
&.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
margin-left: 5px;
|
||||
line-height: 2px;
|
||||
color: gray-04;
|
||||
vertical-align: middle;
|
||||
background: transparent;
|
||||
border: $border-width $border-style transparent;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
margin-left: 5px;
|
||||
line-height: 2px;
|
||||
color: gray-04;
|
||||
vertical-align: middle;
|
||||
background: transparent;
|
||||
border: $border-width $border-style transparent;
|
||||
|
||||
&:hover {
|
||||
color: $blue-01;
|
||||
}
|
||||
&:hover {
|
||||
color: $blue-01;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[aria-disabled="true"] {
|
||||
color: $gray-08;
|
||||
cursor: default;
|
||||
&:disabled,
|
||||
&[aria-disabled='true'] {
|
||||
color: $gray-08;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
color: $gray-08;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: $gray-08;
|
||||
}
|
||||
}
|
||||
|
||||
&-round {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-radius: 100%;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
border: $border-width $border-style transparent;
|
||||
&-round {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-radius: 100%;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
border: $border-width $border-style transparent;
|
||||
|
||||
span,
|
||||
div {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
span,
|
||||
div {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@each $color, $value in $button-map {
|
||||
&.btn-#{$color} {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
&:hover {
|
||||
@if ($color == "black") {
|
||||
background-color: lighten(nth($value, 1), 20%);
|
||||
color: nth($value, 2);
|
||||
} @else if ($color == "white") {
|
||||
background-color: darken(nth($value, 1), 20%);
|
||||
color: nth($value, 2);
|
||||
} @else if ($color == "yellow") {
|
||||
background-color: darken(nth($value, 1), 10%);
|
||||
color: lighten(nth($value, 2), 5%);
|
||||
} @else if (str-index($color, "light")) {
|
||||
background-color: darken(nth($value, 1), 20%);
|
||||
color: lighten(nth($value, 2), 5%);
|
||||
} @else {
|
||||
background-color: darken(nth($value, 1), 10%);
|
||||
color: invert(nth($value, 2), 90%);
|
||||
}
|
||||
}
|
||||
@each $color, $value in $button-map {
|
||||
&.btn-#{$color} {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
&:hover {
|
||||
@if ($color == 'black') {
|
||||
background-color: lighten(nth($value, 1), 20%);
|
||||
color: nth($value, 2);
|
||||
} @else if ($color == 'white') {
|
||||
background-color: darken(nth($value, 1), 20%);
|
||||
color: nth($value, 2);
|
||||
} @else if ($color == 'yellow') {
|
||||
background-color: darken(nth($value, 1), 10%);
|
||||
color: lighten(nth($value, 2), 5%);
|
||||
} @else if (str-index($color, 'light')) {
|
||||
background-color: darken(nth($value, 1), 20%);
|
||||
color: lighten(nth($value, 2), 5%);
|
||||
} @else {
|
||||
background-color: darken(nth($value, 1), 10%);
|
||||
color: invert(nth($value, 2), 90%);
|
||||
}
|
||||
}
|
||||
|
||||
&-transparent {
|
||||
background: transparent;
|
||||
color: $black;
|
||||
&:hover {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-transparent {
|
||||
background: transparent;
|
||||
color: $black;
|
||||
&:hover {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-text-expander {
|
||||
display: block;
|
||||
display: block;
|
||||
|
||||
&.inline {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
line-height: 0;
|
||||
}
|
||||
&.inline {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-text-expander a,
|
||||
.ellipsis-expander {
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
padding: 0 5px 5px;
|
||||
font-size: 12px;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 6px;
|
||||
color: $gray-07;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
background: lighten($gray-03, 5%);
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
padding: 0 5px 5px;
|
||||
font-size: 12px;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 6px;
|
||||
color: $gray-07;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
background: lighten($gray-03, 5%);
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: darken($gray-03, 4%);
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: darken($gray-03, 4%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $white;
|
||||
background-color: $blue-04;
|
||||
}
|
||||
&:active {
|
||||
color: $white;
|
||||
background-color: $blue-04;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,3 +11,5 @@
|
||||
@import './app-dropdown/index.scss';
|
||||
@import './input-field/index.scss';
|
||||
@import './toast-portal/index.scss';
|
||||
@import './wallet-header/index.scss';
|
||||
@import './app-pagination/index.scss';
|
||||
|
||||
@@ -26,7 +26,17 @@ toast-portal {
|
||||
background-color: $gray-07;
|
||||
border: 1px solid $gray-08;
|
||||
}
|
||||
.toast-text {
|
||||
&.--success {
|
||||
background-color: $green-07;
|
||||
border: 1px solid $green-08;
|
||||
}
|
||||
&.--error {
|
||||
background-color: $red-07;
|
||||
border: 1px solid $red-08;
|
||||
}
|
||||
&.--warning {
|
||||
background-color: $yellow-07;
|
||||
border: 1px solid $yellow-08;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
1
src/styles/wallet-header/index.scss
Normal file
1
src/styles/wallet-header/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import './wallet-header.scss';
|
||||
44
src/styles/wallet-header/wallet-header.scss
Normal file
44
src/styles/wallet-header/wallet-header.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
wallet-header {
|
||||
.wallet-header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
justify-items: center;
|
||||
gap: 15px 10px;
|
||||
.header-item {
|
||||
display: inline;
|
||||
grid: 1;
|
||||
width: 250px;
|
||||
height: 132px;
|
||||
background-color: $black;
|
||||
border: 1px solid $black;
|
||||
border-radius: 3px;
|
||||
.--header {
|
||||
margin: 5px auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 20px;
|
||||
color: $gray-04;
|
||||
}
|
||||
.--content {
|
||||
.--balance {
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
margin: 22px 0 4px 0;
|
||||
&.--positive {
|
||||
color: $green-01;
|
||||
}
|
||||
&.--negative {
|
||||
color: $red-01;
|
||||
}
|
||||
}
|
||||
.--currency {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: $gray-08;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user