mirror of
https://github.com/lensapp/lens.git
synced 2024-09-20 05:47:24 +03:00
Align HotbarSelector elements with status bar items (#5755)
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
parent
21109f36ca
commit
014ec6a03b
@ -6,9 +6,10 @@
|
||||
.HotbarSelector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 26px;
|
||||
height: 25px;
|
||||
background-color: var(--layoutBackground);
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
@ -21,8 +22,7 @@
|
||||
|
||||
.HotbarIndex {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
width: 3ch;
|
||||
}
|
||||
|
||||
.Badge {
|
||||
@ -30,21 +30,17 @@
|
||||
background: var(--secondaryBackground);
|
||||
width: 100%;
|
||||
color: var(--settingsColor);
|
||||
padding-top: 3px;
|
||||
padding: 0px calc(var(--padding) / 2);
|
||||
}
|
||||
|
||||
.Icon {
|
||||
--size: 16px;
|
||||
padding: 0 4px 0 0px;
|
||||
margin: 0px 4px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.previous {
|
||||
transform: rotateY(180deg);
|
||||
&:focus-visible {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -58,7 +58,7 @@ const NonInjectedHotbarSelector = observer(({ hotbar, hotbarStore, openCommandOv
|
||||
return (
|
||||
<div className={styles.HotbarSelector}>
|
||||
<Icon
|
||||
material="play_arrow"
|
||||
material="arrow_left"
|
||||
className={cssNames(styles.Icon, styles.previous)}
|
||||
onClick={onPrevClick}/>
|
||||
<div className={styles.HotbarIndex}>
|
||||
@ -80,7 +80,7 @@ const NonInjectedHotbarSelector = observer(({ hotbar, hotbarStore, openCommandOv
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Icon
|
||||
material="play_arrow"
|
||||
material="arrow_right"
|
||||
className={styles.Icon}
|
||||
onClick={onNextClick}
|
||||
/>
|
||||
|
@ -19,17 +19,19 @@
|
||||
.leftSide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-inline-start: calc(var(--padding) / 2);
|
||||
}
|
||||
|
||||
.rightSide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-inline-end: calc(var(--padding) / 2);
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 100%;
|
||||
padding: 0 4px;
|
||||
padding-inline: calc(var(--padding) / 4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user