Update evented table badge (#8283)

I updated the styling of the evented table badge and label.
Fixes https://github.com/fleetdm/fleet/issues/8270
This commit is contained in:
Mike Thomas 2022-10-19 00:07:36 +09:00 committed by GitHub
parent 7c3d9f007a
commit a4c628963b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 19 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 531 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 716 B

View file

@ -115,15 +115,15 @@
}
[purpose='evented-table-icon'] {
margin-left: 4px;
padding: 4px 8px;
padding: 3px 6px 4px;
background-color: @core-vibrant-blue-15;
border-radius: 4px;
display: inline-block;
line-height: 14px;
line-height: 12px;
vertical-align: middle;
img {
height: 14px;
width: 14px;
height: 12px;
width: 12px;
display: inline-block;
}
}
@ -292,27 +292,28 @@
position: relative;
display: inline-block;
top: 0px;
right: -16px;
line-height: 14px;
padding: 4px 8px 4px 18px;
right: -12px;
line-height: 8px;
padding: 4px 6px;
background-color: @core-vibrant-blue-15;
border-radius: 6px;
width: 120px;
border-radius: 4px;
width: 100px;
span {
vertical-align: middle;
font-weight: 700;
font-size: 10px;
font-weight: 600;
font-size: 9px;
line-height: 14px;
color: @core-fleet-black-75;
}
span::before {
background-image: url('/images/icon-evented-14x14@2x.png');
background-size: 14px 14px;
background-image: url('/images/icon-evented-12x12@2x.png');
background-size: 12px 12px;
display: inline-block;
position: relative;
top: 1px;
left: -8px;
width: 14px;
height: 14px;
top: 2px;
margin-right: 4px;
width: 12px;
height: 12px;
content: '';
}
}

View file

@ -41,7 +41,7 @@
</div>
<div class="d-flex d-lg-none pt-3" v-if="showTableNav">
<div purpose="mobile-table-of-contents">
<a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-14x14@2x.png" ></span></a>
<a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-12x12@2x.png" ></span></a>
</div>
</div>
</div>
@ -59,7 +59,7 @@
</div>
<div style="position: relative;">
<div purpose="table-of-contents">
<a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-14x14@2x.png" ></span></a>
<a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-12x12@2x.png" ></span></a>
</div>
<div purpose="overflow-shadow" class="d-none d-lg-block"></div>
</div>