refactor(browser-hint-overlay): remove arrow element and adjust grid layout
This commit is contained in:
@@ -5,7 +5,7 @@
|
|||||||
top: var(--spacing-2, 8px);
|
top: var(--spacing-2, 8px);
|
||||||
right: var(--spacing-2, 8px);
|
right: var(--spacing-2, 8px);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
grid-template-columns: auto minmax(0, 1fr);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
@@ -65,19 +65,6 @@
|
|||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
|
||||||
display: inline-flex;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 800;
|
|
||||||
line-height: 1;
|
|
||||||
opacity: 0.86;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay:hover {
|
.overlay:hover {
|
||||||
border-color: rgba(255, 255, 255, 0.28);
|
border-color: rgba(255, 255, 255, 0.28);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
|
|||||||
@@ -64,9 +64,6 @@ export function BrowserHintOverlay({
|
|||||||
<span className={styles.title}>{title}</span>
|
<span className={styles.title}>{title}</span>
|
||||||
<span className={styles.description}>{description}</span>
|
<span className={styles.description}>{description}</span>
|
||||||
</span>
|
</span>
|
||||||
<span className={styles.arrow} aria-hidden="true">
|
|
||||||
→
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user