Skip to content
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

Set default colours for subsites extras #551

Merged
merged 4 commits into from
Jun 14, 2024
Merged

Set default colours for subsites extras #551

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f21f659
sets default colours for subsites extras menu
markconroy May 29, 2024
111e11c
lints css
markconroy May 29, 2024
4f567de
Merge branch '1.x' into 550/subsite-menu-extras-default-colors
markconroy May 29, 2024
c395c38
removes bg colours, sets hover states
markconroy Jun 14, 2024
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
56 changes: 47 additions & 9 deletions css/components/subsites-menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,38 @@
--subsite-extra-link-color-active-trail: var(--subsite-extra-color);
--subsite-extra-link-bg-color: var(--subsite-extra-color);
--subsite-extra-link-bg-color-hover: var(--subsite-extra-color-contrast);
--subsite-extra-menu-title-color: var(--subsite-extra-color);
--subsite-extra-region-bg-color: var(--color-white);
--subsite-extra-region-padding-horizontal: var(--spacing);
--subsite-extra-region-padding-vertical: var(--spacing);
--subsite-extra-menu-title-color: var(--subsite-extra-color-contrast);
--subsite-extra-region-bg-color: var(--subsite-extra-color);
--subsite-extra-region-padding-left: var(--spacing);
--subsite-extra-region-padding-right: var(--spacing);
--subsite-extra-region-padding-top: var(--spacing);
--subsite-extra-region-padding-bottom: 0;
--subsite-extra-menu-items-gap: var(--spacing);
--subsite-extra-menu-title-font-family: var(--font-primary);
--subsite-extra-border-color: var(--subsite-extra-color);
--subsite-extra-border-color-hovered: var(--subsite-extra-color-contrast);
--subsite-extra-link-spacing-inline: var(--spacing);
--subsite-extra-link-spacing-block: var(--spacing);
--subsite-extra-link-underline-thickness: max(3px, 0.1875rem, 0.12em);
--subsite-extra-header-padding-bottom: 0;
}

/*
Setting the lgd-header padding to 0 when the subsites menu is present.
This means that the menu item looks like a tab, by not having any gap between
it and the bottom of the header. It only applies on pages where there is a
subsites menu. To reverse it, simply set the variable value to var(--spacing).
*/
.subsite-extra:has(.lgd-region--subsites-menu) .lgd-header {
padding-bottom: var(--subsite-extra-header-padding-bottom);
}

/* This would be changed in the menu-subsites.css */
.lgd-region--subsites-menu {
padding-block: var(--subsite-extra-region-padding-vertical);
padding-inline: var(--subsite-extra-region-padding-horizontal);
padding-top: var(--subsite-extra-region-padding-top);
padding-bottom: var(--subsite-extra-region-padding-bottom);
padding-left: var(--subsite-extra-region-padding-left);
padding-right: var(--subsite-extra-region-padding-right);
background-color: var(--subsite-extra-region-bg-color);
}

Expand All @@ -75,6 +95,11 @@
.lgd-region--subsites-menu .subsite-extra__title > a {
color: var(--subsite-extra-menu-title-color);
font-family: var(--subsite-extra-menu-title-font-family);
text-decoration: none;
}
.lgd-region--subsites-menu .subsite-extra__title > a:hover {
text-decoration: underline;
text-decoration-thickness: var(--subsite-extra-link-underline-thickness);
}

.lgd-region--subsites-menu .menu {
Expand Down Expand Up @@ -109,10 +134,13 @@

.lgd-region--subsites-menu .menu > .menu-item a {
display: block;
padding-inline: var(--spacing);
padding-block: var(--spacing);
color: var(--subsite-extra-link-color);
border: var(--border);
border-color: var(--subsite-extra-border-color);
background-color: var(--subsite-extra-link-bg-color);
padding-inline: var(--subsite-extra-link-spacing-inline);
padding-block: var(--subsite-extra-link-spacing-block);
text-decoration: none;
}

.lgd-region--subsites-menu .menu > .menu-item--active-trail a,
Expand All @@ -122,6 +150,16 @@
background-color: var(--subsite-extra-link-bg-color-hover);
}

.lgd-region--subsites-menu .menu > .menu-item--active-trail a,
.lgd-region--subsites-menu .menu > .menu-item a:hover {
border-color: var(--subsite-extra-border-color-hovered);
}

.lgd-region--subsites-menu .menu > .menu-item a:hover {
text-decoration: underline;
text-decoration-thickness: var(--subsite-extra-link-underline-thickness);
}

/*
Set your custom colours.
The class comes from values in the field localgov_subsites_theme
Expand All @@ -132,7 +170,7 @@
.subsite-extra--color-yellow {
--subsite-extra-color: yellow;
--subsite-extra-color-contrast: black;
--subsite-extra-region-bg-color: black;
--subsite-extra-region-bg-color: yellow;
--image-with-caption-bg-color: yellow;
--button-text-color: black;
--button-bg-color: yellow;
Expand Down
Loading