diff options
Diffstat (limited to 'src/components/Menu/ActionEntry.scss')
-rw-r--r-- | src/components/Menu/ActionEntry.scss | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/src/components/Menu/ActionEntry.scss b/src/components/Menu/ActionEntry.scss new file mode 100644 index 000000000..643d2c452 --- /dev/null +++ b/src/components/Menu/ActionEntry.scss @@ -0,0 +1,74 @@ +%text__is-active-item-btn { + opacity: 1; + + &::before { + transform: translateX(-50%); + border-radius: 100%; + position: absolute; + background: var(--color-primary-element); + bottom: 0; + height: 6px; + width: 6px; + content: ''; + left: 50%; + } +} + +.text-menubar, .popover { + button.entry-action__button { + height: 44px; + margin: 0; + border: 0; + // opacity: 0.5; + position: relative; + color: var(--color-main-text); + background-color: transparent; + vertical-align: top; + box-shadow: none; + padding: 0; + + p { + padding: 0; + } + + &:is(li.entry-action-item button) { + padding: 0 0.5em 0 0; + } + + &:not(li.entry-action-item button) { + width: 44px; + } + + &:hover, + &:focus, + &:active { + background-color: var(--color-background-dark); + &:not(:disabled) { + box-shadow: var(--color-primary); + } + } + + &:hover, + &:focus { + opacity: 1; + } + &:focus-visible { + box-shadow: var(--color-primary); + } + + &.is-active { + @extend %text__is-active-item-btn; + } + } + + .entry-action.is-active:not(.entry-action-item) { + @extend %text__is-active-item-btn; + } + + .entry-action.entry-action-item { + &.is-active { + background-color: var(--color-primary-light); + box-shadow: inset 2px 0 var(--color-primary); + } + } +} |