Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-03-27 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix close tab button position

Browse Source
This commit is contained in:
AlphaX-Projects 2023-06-14 10:43:43 +02:00
parent a868dc94c6
commit cf407e60d3
1 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
core/src/components/show-plugin.js
View File

@ -91,7 +91,7 @@ class ShowPlugin extends connect(store)(LitElement) {
cursor: pointer; cursor: pointer;
transition: background 0.3s; transition: background 0.3s;
position: relative; position: relative;
min-width: 120px; min-width: 100px;
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
text-wrap: nowrap; text-wrap: nowrap;
@ -119,15 +119,11 @@ class ShowPlugin extends connect(store)(LitElement) {
.close { .close {
color: #999; color: #999;
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 16px;
line-height: 20px;
position: absolute;
top: 7px;
right: 8px;
} }
.title { .title {
display: inline; display: inline-block;
} }
.close:hover { .close:hover {
@ -151,16 +147,16 @@ class ShowPlugin extends connect(store)(LitElement) {
.iconActive { .iconActive {
position: absolute; position: absolute;
top: 7px; top: 5px;
color: #03a9f4; color: #03a9f4;
--mdc-icon-size: 20px; --mdc-icon-size: 24px;
} }
.iconInactive { .iconInactive {
position: absolute; position: absolute;
top: 7px; top: 5px;
color: #999; color: #999;
--mdc-icon-size: 20px; --mdc-icon-size: 24px;
} }
.count { .count {
@ -195,6 +191,10 @@ class ShowPlugin extends connect(store)(LitElement) {
margin-left: 25px; margin-left: 25px;
} }
.ml-30 {
margin-left: 30px;
}
.mr-10 { .mr-10 {
margin-right: 10px; margin-right: 10px;
} }
@ -207,6 +207,30 @@ class ShowPlugin extends connect(store)(LitElement) {
margin-right: 20px; margin-right: 20px;
} }
.mt-10 {
margin-top: 10px;
}
.mt-15 {
margin-top: 15px;
}
.mt-20 {
margin-top: 20px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-15 {
margin-bottom: 15px;
}
.mb-20 {
margin-bottom: 20px;
}
@keyframes pulse { @keyframes pulse {
0% { 0% {
box-shadow:#C6011F 0 0 0 0; box-shadow:#C6011F 0 0 0 0;
@ -304,24 +328,18 @@ class ShowPlugin extends connect(store)(LitElement) {
class="tab ${this.currentTab === index ? 'active' : ''}" class="tab ${this.currentTab === index ? 'active' : ''}"
@click=${() => this.currentTab = index} @click=${() => this.currentTab = index}
> >
<div class="${this.currentTab === index ? "iconActive" : "iconInactive"}">
<mwc-icon>${icon}</mwc-icon>
</div>
<div class="title"> <div class="title">
<div class="${this.currentTab === index ? "iconActive" : "iconInactive"}"> ${count ? html`
<mwc-icon>${icon}</mwc-icon> <span class="ml-30">${title}</span>
</div> <span class="count ml-5">${count}</span>
<span class="close ml-15" @click=${() => {this.removeTab(index)}}>X</span>
<div class="title"> ` : html`
${count ? html` <span class="ml-25">${title}</span>
<div class="ml-25"> <span class="close ml-15" @click=${() => {this.removeTab(index)}}>X</span>
${title} `}
<span class="count ml-5">${count}</span>
</div>
` : html`
<div class="ml-25">
${title}
</div>
`}
</div>
<div class="close" @click=${() => { this.removeTab(index) }}>x</div>
</div> </div>
</div> </div>
` `