1
1
mirror of https://github.com/primer/css.git synced 2024-12-23 06:01:54 +03:00
This commit is contained in:
Katie Langerman 2022-08-11 22:50:46 +00:00
parent f89caeadf2
commit 3bfd67b332

View File

@ -603,8 +603,8 @@
}
// TODO: replace with refactored IconButton
.ActionList-item-button {
position: relative;
button.ActionList-item-button {
// position: relative;
display: grid;
width: $spacer-5;
height: $spacer-5;
@ -612,7 +612,7 @@
color: var(--color-fg-muted);
cursor: pointer;
user-select: none;
background-color: transparent;
background: transparent;
border: $border-width $border-style transparent;
border-radius: $border-radius;
transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
@ -620,29 +620,48 @@
place-content: center;
align-self: flex-start;
flex-shrink: 0;
position: absolute;
right: 0;
top: 0;
visibility: hidden;
margin-left: 0;
line-height: unset;
&:hover,
&:focus {
background-color: var(--color-btn-hover-bg);
background-color: var(--color-action-list-item-default-hover-bg);
border: $border-width $border-style var(--color-btn-hover-bg);
color: var(--color-fg-muted);
}
&.ActionList-item-button--leading {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&.ActionList-item-button--trailing {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&.ActionList-item-button--onHover {
visibility: hidden;
&:hover,
&:focus-within {
.ActionList-item-button {
visibility: visible;
}
}
}
}
.ActionList-item {
&:hover,
&:focus-within {
.ActionList-item-button {
visibility: visible;
}
}
.ActionList-item--withActions {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
// notes to katie
// offer hover prop for leading/trailing action
// button styles
// sub-group items etc etc
// action button height set per size option
// move single and multi select to own component