mirror of
https://github.com/FJurmanovic/wallet-web.git
synced 2026-11-11 07:41:09 +00:00
styling rest of page
This commit is contained in:
Fran Jurmanović
@@ -1,35 +1,18 @@
|
||||
.dropdown-custom {
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
position: relative;
|
||||
div.dropdown-custom-top {
|
||||
app-dropdown {
|
||||
.dropdown-custom {
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
position: relative;
|
||||
background-color: $white;
|
||||
color: $black;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
padding: 5px 0;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
border: 1px solid $white;
|
||||
border-radius: 5px;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
margin-right: 4px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-top: 8px solid #2e2e2e;
|
||||
}
|
||||
&.--open {
|
||||
border-bottom-right-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom: transparent;
|
||||
margin-bottom: 0 !important;
|
||||
div.dropdown-custom-top {
|
||||
position: relative;
|
||||
background-color: $white;
|
||||
color: $black;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
padding: 5px 0;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
border: 1px solid $gray-03;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -40,71 +23,97 @@
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid #2e2e2e;
|
||||
border-top: none;
|
||||
border-top: 8px solid #2e2e2e;
|
||||
}
|
||||
}
|
||||
span.dropdown-custom-fieldname {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
div.dropdown-custom-open {
|
||||
border: 1px solid transparent;
|
||||
position: absolute;
|
||||
width: calc(100% - 2 * 1px);
|
||||
border-top: none;
|
||||
margin-top: 0 !important;
|
||||
background-color: #fbfafa;
|
||||
border-bottom-right-radius: 0.2em;
|
||||
border-bottom-left-radius: 0.2em;
|
||||
font-size: 16px;
|
||||
z-index: 1500;
|
||||
input.dropdown-custom-search {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: calc(100% - 2 * 2px);
|
||||
margin: 2px;
|
||||
background-color: $white;
|
||||
border: 1px solid $white;
|
||||
border-radius: 0.3em;
|
||||
&:hover {
|
||||
border: 1px solid $white;
|
||||
&.--open {
|
||||
border-bottom-right-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom: transparent;
|
||||
margin-bottom: 0 !important;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
margin-right: 4px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid #2e2e2e;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul.dropdown-custom-list {
|
||||
padding: 1px 0;
|
||||
max-height: 100px;
|
||||
overflow-y: scroll;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
li.dropdown-custom-listitem {
|
||||
margin: 2px;
|
||||
padding: 1px 0;
|
||||
list-style-type: none;
|
||||
color: #0e0d0d;
|
||||
span.dropdown-custom-fieldname {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #c6d8ff;
|
||||
}
|
||||
}
|
||||
div.dropdown-custom-open {
|
||||
border: 1px solid $gray-08;
|
||||
position: absolute;
|
||||
width: calc(100% - 2 * 1px);
|
||||
border-top: none;
|
||||
margin-top: 0 !important;
|
||||
background-color: $gray-08;
|
||||
border-bottom-right-radius: 0.2em;
|
||||
border-bottom-left-radius: 0.2em;
|
||||
font-size: 16px;
|
||||
z-index: 1500;
|
||||
input.dropdown-custom-search {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: calc(100% - 2 * 2px);
|
||||
margin: 2px;
|
||||
background-color: $gray-06;
|
||||
border: 1px solid $gray-06;
|
||||
font-size: 11px;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
ul.dropdown-custom-list {
|
||||
padding: 1px 0;
|
||||
max-height: 100px;
|
||||
overflow-y: scroll;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&.--selected {
|
||||
background-color: #d8e4ff;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
li.dropdown-custom-listitem {
|
||||
text-align: left;
|
||||
margin: 2px;
|
||||
padding: 1px 0;
|
||||
list-style-type: none;
|
||||
color: $white;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: $black;
|
||||
}
|
||||
&.--selected {
|
||||
background-color: $gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin: 3px 0;
|
||||
}
|
||||
.input-error {
|
||||
color: $red-04;
|
||||
margin: 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,36 @@
|
||||
app-form {
|
||||
form[data-target="app-form.formElement"] {
|
||||
width: 56%;
|
||||
margin: 0 auto;
|
||||
form[data-target='app-form.formElement'] {
|
||||
width: 56%;
|
||||
margin: 0 auto;
|
||||
|
||||
input-field,
|
||||
app-dropdown > .input-main {
|
||||
width: 100%;
|
||||
display: block;
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 2px 0;
|
||||
margin: 6px 0;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
input-field,
|
||||
app-dropdown > .input-main {
|
||||
width: 100%;
|
||||
display: block;
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 2px 0;
|
||||
margin: 6px 0;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.form-buttons {
|
||||
.button-content {
|
||||
button {
|
||||
&.--submit {
|
||||
background-color: $blue-08;
|
||||
color: $white;
|
||||
&:hover {
|
||||
background-color: $blue-09;
|
||||
}
|
||||
&.--disabled {
|
||||
background-color: $gray-09;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,9 +67,19 @@ app-pagination {
|
||||
position: relative;
|
||||
height: 33px;
|
||||
margin-bottom: 7px;
|
||||
.--total {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
bottom: 9px;
|
||||
color: $gray-05;
|
||||
}
|
||||
.--footer {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
.--pages {
|
||||
margin-right: 7px;
|
||||
color: $gray-05;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,17 @@
|
||||
input-field {
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 5px 0 !important;
|
||||
border: 1px solid $gray-03;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.input-error {
|
||||
color: $red-04;
|
||||
margin: 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
@import "./menu-layout.scss";
|
||||
@import './menu-layout.scss';
|
||||
@import './initial-layout.scss';
|
||||
|
||||
5
src/styles/layout/initial-layout.scss
Normal file
5
src/styles/layout/initial-layout.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
initial-layout {
|
||||
[data-target='initial-layout.appPage'] {
|
||||
margin: 0 32px;
|
||||
}
|
||||
}
|
||||
@@ -13,3 +13,4 @@
|
||||
@import './toast-portal/index.scss';
|
||||
@import './wallet-header/index.scss';
|
||||
@import './app-pagination/index.scss';
|
||||
@import './wallet-list/index.scss';
|
||||
|
||||
@@ -1,30 +1,51 @@
|
||||
app-modal {
|
||||
[data-target="app-modal.modalOverlay"] {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
[data-target='app-modal.modalOverlay'] {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
|
||||
[data-target="app-modal.modalContent"] {
|
||||
position: absolute;
|
||||
z-index: 1005;
|
||||
width: 960px;
|
||||
min-height: 320px;
|
||||
max-height: 560px;
|
||||
padding-bottom: 10px;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
background: $gray-08;
|
||||
box-shadow: 1px 1px 5px -5px #868686;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
[data-target='app-modal.modalContent'] {
|
||||
position: absolute;
|
||||
z-index: 1005;
|
||||
width: 960px;
|
||||
min-height: 160px;
|
||||
max-height: 560px;
|
||||
padding-bottom: 10px;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
background: $gray-05;
|
||||
color: $black;
|
||||
box-shadow: 1px 1px 5px -5px #868686;
|
||||
border-radius: 3px;
|
||||
|
||||
.page {
|
||||
&.--title {
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
app-form {
|
||||
.app-form {
|
||||
margin-bottom: 64px;
|
||||
.form-buttons {
|
||||
.button-content {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.page {
|
||||
&.--title {
|
||||
font-size: 28px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
&.--title {
|
||||
font-size: 28px;
|
||||
margin: 32px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ wallet-header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
justify-items: center;
|
||||
margin: 32px 0;
|
||||
gap: 15px 10px;
|
||||
.header-item {
|
||||
display: inline;
|
||||
@@ -42,3 +43,13 @@ wallet-header {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wallet-buttons {
|
||||
position: relative;
|
||||
height: 42px;
|
||||
.button-group {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
1
src/styles/wallet-list/index.scss
Normal file
1
src/styles/wallet-list/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import './wallet-list.scss';
|
||||
9
src/styles/wallet-list/wallet-list.scss
Normal file
9
src/styles/wallet-list/wallet-list.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
wallet-list {
|
||||
.wallet-item {
|
||||
color: $white !important;
|
||||
text-decoration: none !important;
|
||||
&:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user