Skip to content

Header menu colors #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dmitry-sinina wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Header menu colors #47

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ad5595b
add menu colors variables
dmitry-sinina Jun 7, 2026
f62025f
more variables
dmitry-sinina Jun 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 57 additions & 9 deletions app/assets/stylesheets/wigu/active_admin_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,29 @@ $skinMainSecondColor: #5ea3d3!default;
$skinBorderRadius: 4px!default;
$skinBorderWindowColor: #e6e9ee!default;
$skinTablePadding: 10px!default;

// Header menu colors. Each defaults to the previous value, so projects that do
// not set these compile to identical CSS (and a project that overrides
// $skinMainSecondColor still gets the menu following that accent).
$skinMenuPillColor: $skinMainSecondColor!default; // top-level current/hover pill
$skinMenuPanelColor: $skinMainSecondColor!default; // dropdown panel bg + hover "bridge" border
$skinMenuItemHoverColor: transparent!default; // dropdown item hover/current bg (was: none)
$skinMenuTextColor: #ffffff!default; // dropdown item text (was: inherited #fff)

// Header / menu sizing. Defaults reproduce (or keep the same total as) the
// previous hard-coded values, so non-configuring projects are unchanged.
$skinMenuFontSize: 1em!default; // header menu text size
$skinMenuItemPaddingY: 5px!default; // dropdown item top/bottom padding (was ~6px/4px)
$skinMenuItemLineHeight: 1.5!default; // dropdown item line-height
$skinHeaderPaddingY: 7px!default; // header top/bottom padding (was 5px top / 9px bottom)
$skinHeaderLogoMaxHeight: none!default; // cap the site_title logo image height

// Title bar
$skinTitleBarColor: lighten($skinMainFirstColor, 8%)!default;
$skinTitleBarBorderColor: $skinMainSecondColor!default;
$skinTitleBarBorderWidth: 3px!default;
$skinTitleBarButtonPaddingY: 10px!default; // action button vertical padding
$skinTitleBarButtonPaddingX: 20px!default; // action button horizontal padding
//HTML----------------------------------------------------------------------------------------------------------------//

html {
Expand Down Expand Up @@ -58,13 +81,20 @@ body.active_admin {
#header {
background-color: $skinMainFirstColor;
border-bottom: 1px solid lighten( $skinMainFirstColor, 15% )!important;
padding-bottom: 9px;
padding-top: $skinHeaderPaddingY;
padding-bottom: $skinHeaderPaddingY;
border: none;
text-shadow: none;
background-image: none;
h1.site_title {
color: $skinMainSecondColor;
font-size: 16px;
img {
max-height: $skinHeaderLogoMaxHeight;
}
}
ul.tabs > li {
font-size: $skinMenuFontSize;
}
a, a:link {
color: #ffffff;
Expand All @@ -75,18 +105,31 @@ body.active_admin {
padding: 6px 10px 6px 10px;
}
ul.tabs > li.current > a, ul.tabs > li:hover > a {
background-color: $skinMainSecondColor;
background-color: $skinMenuPillColor;
}
ul.tabs {
li.has_nested {
a {
padding-right: 20px;
}
ul {
background-color: $skinMainSecondColor;
background-color: $skinMenuPanelColor;
@include rounded($skinBorderRadius);
// Size to content instead of the base's max-width: calc(100% + 20px),
// which truncates long labels onto a second line.
width: auto;
max-width: none;
li > a {
padding-left: 15px;
color: $skinMenuTextColor;
white-space: nowrap;
line-height: $skinMenuItemLineHeight;
padding-top: $skinMenuItemPaddingY;
padding-bottom: $skinMenuItemPaddingY;
}
li:hover > a, li.current > a {
background-color: $skinMenuItemHoverColor;
color: #ffffff;
}
li.current > a::before, li:hover > a::before {
content: '';
Expand All @@ -101,9 +144,14 @@ body.active_admin {
}
}
}
li.has_nested:hover {
a {
border-bottom: 7px solid $skinMainSecondColor;
// `> li.has_nested` + `> a` so the 7px "bridge" border is added only to a
// hovered TOP-LEVEL menu item (bridging its pill to the dropdown). Without
// the `>`, nested has_nested items (e.g. System > Components) also got the
// border, which pushed the next dropdown item down when their submenu
// opened. Colored to match the panel so it blends.
> li.has_nested:hover {
> a {
border-bottom: 7px solid $skinMenuPanelColor;
}
}
}
Expand All @@ -112,9 +160,9 @@ body.active_admin {
background-image: none;
border: none;
box-shadow: none;
background-color: lighten( $skinMainFirstColor, 8% );
background-color: $skinTitleBarColor;
border: none;
border-bottom: 3px solid $skinMainSecondColor;
border-bottom: $skinTitleBarBorderWidth solid $skinTitleBarBorderColor;
#titlebar_left {
span.breadcrumb {
font-size: 12px;
Expand All @@ -138,7 +186,7 @@ body.active_admin {
@include rounded($skinBorderRadius);
background-color: $skinMainSecondColor;
border: none;
padding: 10px 20px;
padding: $skinTitleBarButtonPaddingY $skinTitleBarButtonPaddingX;
color: #ffffff;
font-weight: 600;
&:hover {
Expand Down