diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss index adac77f6a5a426e17540648a22b6ffd119e2a81d..5fd585b2d65c33ba71e314506c33e818015d6b6e 100644 --- a/resources/assets/stylesheets/mixins/colors.scss +++ b/resources/assets/stylesheets/mixins/colors.scss @@ -251,6 +251,12 @@ $color--sidebar-focus: $color--gray-6; $color--sidebar-hover: $color--gray-6; $color--sidebar-divider: $color--gray-6; +$color--action-menu-border: $color--gray-5; +$color--action-menu-divider: $color--gray-6; +$color--action-menu-hover: $color--gray-6; +$color--action-menu-marker-hover: $color--gray-5; +$color--action-menu-shadow: $color--gray-5; + $color--dialog-overlay: $color--gray-1; $color--tile-border-focus: $color--gray-4; diff --git a/resources/assets/stylesheets/scss/actionmenu.scss b/resources/assets/stylesheets/scss/actionmenu.scss index 4d678eaafd9f224c4bea513b1333213cd0872e4e..559034a6c0cb0248233dc399461b37245b74da9e 100644 --- a/resources/assets/stylesheets/scss/actionmenu.scss +++ b/resources/assets/stylesheets/scss/actionmenu.scss @@ -1,4 +1,4 @@ -$action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60); +$action-menu-shadow: 2px 2px 0 var(--color--action-menu-shadow); .action-menu { display: inline-block; @@ -25,13 +25,14 @@ $action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60); .action-menu-content { position: absolute; - top: -4px; - right: -4px; + top: -10px; + right: -10px; - padding: 4px 8px; + padding: 10px 10px 10px 5px; background: var(--white); - border: thin solid var(--dark-gray-color-45); + border: thin solid var(--color--action-menu-border); + border-radius: $border-radius; box-shadow: $action-menu-shadow; font-weight: normal; text-align: left; @@ -81,29 +82,30 @@ $action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60); .action-menu-title { font-weight: bold; - margin: 0.2em 0 0.3em; + margin: 0 0 0 10px; } .action-menu-list { list-style: none; margin: 0; - padding: 0; + padding: 20px 0 0 0; } .action-menu-item { - line-height: 1; - padding: 0; + line-height: 24px; + padding: 0 0 0 5px; + border-left: solid 4px transparent; > a, > label { margin: 0; - padding: 3px 0; + padding: 2px 30px 2px 0; display: block; } .action-menu-item-icon { display: inline-block; - margin: 0 0.25em; + margin: 0 0.5em 0.25em 0; vertical-align: middle; width: var(--icon-size-action-menu); @@ -129,8 +131,8 @@ $action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60); > hr { border-style: none; - border-top: thin solid var(--dark-gray-color-45); - margin: 4px 0; + border-top: thin solid var(--color--action-menu-divider); + margin: 7px 0 7px -5px; } &.action-menu-item-disabled { @@ -144,6 +146,14 @@ $action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60); } } } + + &:hover { + background-color: var(--color--action-menu-hover); + border-color: var(--color--action-menu-marker-hover); + a, a:hover { + color: var(--color--font-primary); + } + } } &.is-open { diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss index 4deeeba9d45346e1b1ddac48be1bdc430f4d9bfd..4735f73b88525d939789fb125df8e50b7914cc9e 100644 --- a/resources/assets/stylesheets/scss/variables.scss +++ b/resources/assets/stylesheets/scss/variables.scss @@ -56,6 +56,9 @@ $transition-duration: .3s; $transition-duration-slow: .5s; $transition-duration-superslow: 1s; +// Border radius: +$border-radius: 4px; + // Layout $page-margin: 15px; @@ -229,6 +232,12 @@ $grid-gap: 0; --color--sidebar-hover: #{$color--sidebar-hover}; --color--sidebar-divider: #{$color--sidebar-divider}; + --color--action-menu-border: #{$color--action-menu-border}; + --color--action-menu-divider: #{$color--action-menu-divider}; + --color--action-menu-hover: #{$color--action-menu-hover}; + --color--action-menu-marker-hover: #{$color--action-menu-marker-hover}; + --color--action-menu-shadow: #{$color--action-menu-shadow}; + --color--dialog-overlay: #{$color--dialog-overlay}; --color--tile-border-focus: #{$color--tile-border-focus};