138 lines
2.3 KiB
SCSS
138 lines
2.3 KiB
SCSS
@use "../../mixins";
|
|
/* stylelint-disable declaration-no-important */
|
|
|
|
.quick-action {
|
|
justify-content: space-between;
|
|
display: flex;
|
|
align-items: baseline;
|
|
align-items: center;
|
|
border: 2px solid transparent;
|
|
|
|
.chevron-popover {
|
|
.popover-trigger-button {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.action-counter {
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.action-button-inner,
|
|
.extra-button {
|
|
padding: 0.5em;
|
|
z-index: 1;
|
|
}
|
|
|
|
.separator {
|
|
display: block;
|
|
align-self: stretch;
|
|
width: 1px;
|
|
background-color: var(--icon);
|
|
opacity: 0.75;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.action-button-inner {
|
|
display: grid;
|
|
grid-gap: 0.125em;
|
|
grid-template-columns: max-content;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: max-content;
|
|
align-items: center;
|
|
|
|
@include mixins.unfocused-style {
|
|
.focus-marker {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.active-marker {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
@include mixins.focused-style {
|
|
.focus-marker {
|
|
visibility: visible;
|
|
}
|
|
|
|
.active-marker {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.-pin {
|
|
border: 2px dashed var(--icon);
|
|
border-radius: var(--roundness);
|
|
grid-template-columns: minmax(max-content, 1fr) auto;
|
|
|
|
.action-button-inner {
|
|
opacity: 0.8;
|
|
padding-right: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.chevron-icon,
|
|
.extra-button,
|
|
.separator {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.-with-extra {
|
|
.action-button-inner,
|
|
.extra-button {
|
|
padding-left: 0.25em;
|
|
padding-right: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-button {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
align-items: center;
|
|
padding: 0;
|
|
|
|
.action-button-inner {
|
|
&:hover,
|
|
&.-active {
|
|
&.reply-button:not(.disabled) {
|
|
.svg-inline--fa {
|
|
color: var(--cBlue);
|
|
}
|
|
}
|
|
|
|
&.retweet-button:not(.disabled) {
|
|
.svg-inline--fa {
|
|
color: var(--cGreen);
|
|
}
|
|
}
|
|
|
|
&.favorite-button:not(.disabled) {
|
|
.svg-inline--fa {
|
|
color: var(--cOrange);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.-extra {
|
|
.action-counter {
|
|
justify-self: end;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
.chevron-icon {
|
|
justify-self: end;
|
|
}
|
|
|
|
.extra-button {
|
|
justify-self: end;
|
|
justify-content: end;
|
|
}
|
|
}
|
|
}
|