Remove mixin `toggle-menu-item-background`

As we want to use CSS variables we can’t use SASS mixins for setting
colors.
pull/5178/head
Wieland Lindenthal 8 years ago committed by Oliver Günther
parent 9c3a47f811
commit 75fd269493
No known key found for this signature in database
GPG Key ID: 88872239EB414F99
  1. 75
      app/assets/stylesheets/layout/_main_menu.sass
  2. 11
      app/views/custom_styles/_inline_css.erb

@ -29,29 +29,8 @@
$toggler-width: 40px
@mixin highlight-left-item-border
border-left: $main-menu-selected-hover-indicator-width solid $main-menu-selected-hover-indicator-color
@mixin toggle-menu-item-background($bg-color: $main-menu-bg-hover-selected-background, $color: $main-menu-selected-font-color)
@include default-transition
&:hover
background: $bg-color
@if $main-menu-enable-toggle-highlighting != true
// simultaneously hover all menu item anchor tags
> a
color: $color
> a
@include default-transition
cursor: pointer
text-decoration: none
&.selected, &.selected + a
background: $bg-color
&:hover, &.selected, &.selected + a
color: $color
border-left: $main-menu-selected-hover-indicator-width solid $main-menu-selected-hover-indicator-color
border-left: $main-menu-selected-hover-indicator-width solid var(--main-menu-selected-hover-indicator-color)
#main-menu
bottom: auto
@ -81,7 +60,31 @@ $toggler-width: 40px
.main-item-wrapper
display: flex
+toggle-menu-item-background
@include default-transition
&:hover
background: $main-menu-bg-hover-selected-background
background: var(--main-menu-bg-hover-selected-background)
@if $main-menu-enable-toggle-highlighting != true
// simultaneously hover all menu item anchor tags
> a
color: $main-menu-selected-font-color
> a
@include default-transition
cursor: pointer
text-decoration: none
&.selected, &.selected + a
background: $main-menu-bg-hover-selected-background
background: var(--main-menu-bg-hover-selected-background)
&:hover, &.selected, &.selected + a
color: $main-menu-selected-font-color
// left item border hover / selected effect
&:hover
@ -147,7 +150,29 @@ $toggler-width: 40px
&.unattached
border-top: 1px solid #ddd
li
+toggle-menu-item-background($main-menu-child-bg-hover-selected-color, $main-menu-child-selected-font-color)
@include default-transition
&:hover
background: $main-menu-child-bg-hover-selected-color
background: var(--main-menu-child-bg-hover-selected-color)
@if $main-menu-enable-toggle-highlighting != true
// simultaneously hover all menu item anchor tags
> a
color: $main-menu-child-selected-font-color
> a
@include default-transition
cursor: pointer
text-decoration: none
&.selected, &.selected + a
background: $main-menu-child-bg-hover-selected-color
background: var(--main-menu-child-bg-hover-selected-color)
&:hover, &.selected, &.selected + a
color: $main-menu-child-selected-font-color
a
padding-left: 10px

@ -44,6 +44,17 @@ See doc/COPYRIGHT.rdoc for more details.
:root {
<% DesignColor.overwritten.each do |design_color| %>
--<%= design_color.variable %>: <%= design_color.hexcode %>;
<% if design_color.variable == "primary-color" %>
<% end %>
<% if design_color.variable == "primary-color-dark" %>
--main-menu-child-bg-hover-selected-color: <%= design_color.hexcode %>;
--main-menu-selected-hover-indicator-color: <%= design_color.hexcode %>;
--main-menu-bg-hover-selected-background: url() no-repeat <%= design_color.hexcode %>;
<% end %>
<% if design_color.variable == "alternative-color" %>
<% end %>
<% end %>
}

Loading…
Cancel
Save