mirror of
https://github.com/FJurmanovic/wallet-web.git
synced 2026-02-06 14:18:08 +00:00
styled wallet headers and transaction tables
This commit is contained in:
Fran Jurmanović
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user