489 lines
12 KiB
SCSS
489 lines
12 KiB
SCSS
// -------
|
|
// Imports
|
|
// -------
|
|
@import "../navigation/variables";
|
|
@import "../navigation/admin-toolbar";
|
|
@import "../navigation/toolbar-menu";
|
|
@import "../navigation/toolbar-block";
|
|
@import "../navigation/toolbar-link";
|
|
@import "../navigation/tooltip";
|
|
|
|
// Toolbar Variables
|
|
:root {
|
|
--gin-toolbar-height: 39px;
|
|
--gin-toolbar-secondary-height: 48px;
|
|
--gin-scroll-offset: 72px;
|
|
--gin-toolbar-y-offset: var(--gin-toolbar-height);
|
|
--gin-toolbar-x-offset: 0px; // Needs px to work in calc() functions.
|
|
--gin-sticky-offset: 0px; // Needs px to work in calc() functions.
|
|
--gin-icon-size-toolbar: 20px;
|
|
|
|
@include mq(medium) {
|
|
--gin-toolbar-height: 0px; // Needs px to work in calc() functions.
|
|
--gin-toolbar-secondary-height: 52px;
|
|
--gin-toolbar-x-offset: var(--drupal-displace-offset-left, 64px);
|
|
--gin-scroll-offset: 130px;
|
|
--gin-sticky-offset: var(--gin-height-sticky);
|
|
}
|
|
}
|
|
|
|
html.admin-toolbar-expanded {
|
|
@include mq(medium) {
|
|
--gin-toolbar-x-offset: var(--drupal-displace-offset-left, 264px);
|
|
}
|
|
}
|
|
|
|
body.gin--navigation {
|
|
@include mq($to: medium) {
|
|
padding-top: var(--gin-toolbar-y-offset) !important;
|
|
padding-left: var(--gin-toolbar-x-offset, 39px) !important;
|
|
}
|
|
}
|
|
|
|
.gin--navigation .gin-secondary-toolbar:not(.gin-secondary-toolbar--frontend) {
|
|
margin-bottom: var(--gin-spacing-xxs);
|
|
}
|
|
|
|
.gin--navigation .gin-secondary-toolbar--frontend {
|
|
z-index: 102;
|
|
margin-inline-start: var(--gin-toolbar-x-offset);
|
|
}
|
|
|
|
// Set transtion to Gin's to avoid different speeds.
|
|
.admin-toolbar ~ .dialog-off-canvas-main-canvas,
|
|
.gin--navigation .gin-secondary-toolbar--frontend {
|
|
transition: margin-inline-start var(--gin-transition-fast), margin-left var(--gin-transition-fast);
|
|
}
|
|
|
|
// ----------
|
|
// Navigation
|
|
// ----------
|
|
.gin--navigation {
|
|
font-family: var(--gin-font);
|
|
padding-top: 0 !important;
|
|
|
|
.admin-toolbar {
|
|
top: 0;
|
|
overflow-y: initial;
|
|
padding-inline: 0;
|
|
padding-block-start: 0;
|
|
border-right: 0;
|
|
box-shadow: 1px 0 0 var(--gin-border-color-layer);
|
|
|
|
// Hide on smaller screens for now as this is not ready yet.
|
|
@include mq($to: medium) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.admin-toolbar__content {
|
|
padding-block: var(--gin-spacing-xxs);
|
|
padding-inline: var(--gin-spacing-xs);
|
|
margin-block-end: 0;
|
|
overflow-y: auto;
|
|
// Scroll shadow
|
|
background: linear-gradient(var(--gin-bg-layer) 30%, var(--gin-bg-layer)),
|
|
linear-gradient(var(--gin-bg-layer), var(--gin-bg-layer) 80%) 0 100%,
|
|
radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)),
|
|
radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)) 0 100%;
|
|
background-color: var(--gin-bg-layer);
|
|
background-repeat: no-repeat;
|
|
background-attachment: local, local, scroll, scroll;
|
|
background-size: 100% 40px, 100% 40px, 100% 16px, 100% 16px;
|
|
}
|
|
|
|
.admin-toolbar__sticky-section {
|
|
position: static;
|
|
width: 100%;
|
|
margin-inline: 0;
|
|
padding-block-start: var(--gin-spacing-xs);
|
|
padding-block-end: 0;
|
|
}
|
|
|
|
.admin-toolbar,
|
|
.admin-toolbar__sticky-section {
|
|
background: var(--gin-bg-layer);
|
|
}
|
|
|
|
// Navigation header
|
|
.admin-toolbar__header {
|
|
margin-bottom: -4px;
|
|
}
|
|
|
|
// Content block
|
|
.toolbar-block__content.toolbar-block__content--content {
|
|
margin-block-start: var(--space-s);
|
|
}
|
|
|
|
// Navigation link
|
|
.toolbar-link {
|
|
color: var(--gin-color-text);
|
|
font-weight: normal;
|
|
}
|
|
|
|
// Toolbar menu
|
|
.toolbar-menu {
|
|
margin-inline: 0;
|
|
}
|
|
|
|
// Focus
|
|
.toolbar-menu__item--level-1 {
|
|
> .toolbar-link {
|
|
padding-block: calc(var(--gin-spacing-xs) + 1px);
|
|
margin-bottom: var(--gin-spacing-xxxs);
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
|
|
}
|
|
}
|
|
}
|
|
|
|
.navigation-menu-wrapper.menu--logo {
|
|
margin-bottom: -5px;
|
|
}
|
|
|
|
.menu-item.current > .toolbar-link {
|
|
color: var(--gin-color-primary);
|
|
}
|
|
|
|
// -------
|
|
// Level 1
|
|
// -------
|
|
|
|
//Active menu item
|
|
.toolbar-menu__item--level-1.menu-item--expanded,
|
|
.toolbar-menu__item--level-1.current,
|
|
.toolbar-menu__item--level-1.active-path,
|
|
.toolbar-menu__item--level-2.active-path {
|
|
background-color: transparent;
|
|
|
|
> .toolbar-link {
|
|
color: var(--gin-color-primary);
|
|
background-color: var(--gin-color-primary-light);
|
|
|
|
// Icons
|
|
&::before,
|
|
&::after {
|
|
background: var(--gin-color-primary);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: var(--gin-color-primary-hover);
|
|
background-color: var(--gin-color-primary-light-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Menu item hover
|
|
.toolbar-menu__item--level-1 > .toolbar-link:hover,
|
|
.toolbar-menu__item--level-1 > .toolbar-link:focus,
|
|
.toolbar-menu__item--level-2 > .toolbar-link:hover,
|
|
.toolbar-menu__item--level-2 > .toolbar-link:focus,
|
|
.toolbar-menu__item--level-2 .toolbar-link:hover,
|
|
.toolbar-menu__item--level-2 .toolbar-link:focus,
|
|
.toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link,
|
|
.toolbar-link--sidebar-toggle:hover,
|
|
.toolbar-link--sidebar-toggle:focus {
|
|
color: var(--gin-color-primary-hover);
|
|
background-color: var(--gin-color-primary-light-hover);
|
|
|
|
// Icons
|
|
&::before,
|
|
&::after {
|
|
background: var(--gin-color-primary);
|
|
}
|
|
}
|
|
|
|
// Hide Drupal 9 block_content links
|
|
.toolbar-menu__item--level-1 > .toolbar-link--manage-fields,
|
|
.toolbar-menu__item--level-1 > .toolbar-link--manage-form-display,
|
|
.toolbar-menu__item--level-1 > .toolbar-link--manage-display,
|
|
.toolbar-menu__item--level-1 > .toolbar-link--manage-permissions,
|
|
.toolbar-menu__item--level-1 > .toolbar-link--delete,
|
|
.toolbar-menu__item--level-1 > .toolbar-link[class*="toolbar-link--admin-toolbar-tools-extra-linksentity"],
|
|
.toolbar-menu__item--level-1 > .toolbar-link--announcements-feed-announcement
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
// -----------
|
|
// Level 2 & 3
|
|
// -----------
|
|
.toolbar-menu__item--level-2,
|
|
.toolbar-menu__item--level-3 {
|
|
font-size: var(--gin-font-size-xs);
|
|
}
|
|
|
|
.toolbar-menu__item--level-2.current > .toolbar-link::after,
|
|
.toolbar-menu__item--level-3.current > .toolbar-link::after {
|
|
background-color: var(--gin-color-primary);
|
|
}
|
|
|
|
.toolbar-menu__item--level-2 > .toolbar-link::before,
|
|
.toolbar-menu__item--level-3 > .toolbar-link::before,
|
|
.toolbar-menu__item--level-2.menu-item--expanded > .toolbar-menu::before {
|
|
background-color: var(--gin-border-color-layer2);
|
|
}
|
|
|
|
.toolbar .toolbar-menu,
|
|
.toolbar .toolbar-icon.toolbar-handle {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.toolbar .toolbar-menu .toolbar-menu a {
|
|
color: var(--gin-color-text);
|
|
}
|
|
}
|
|
|
|
// Submenu
|
|
html:not(.admin-toolbar-expanded) .gin--navigation .cloned-flyout,
|
|
html:not(.admin-toolbar-expanded) .gin--navigation .cloned-flyout .toolbar-menu__arrow-ref::before,
|
|
html:not(.admin-toolbar-expanded) .gin--navigation .toolbar-menu__item--level-1 > .toolbar-menu-wrapper,
|
|
html:not(.admin-toolbar-expanded) .gin--navigation .toolbar-menu__item--level-1.menu-item--expanded > .toolbar-menu-wrapper .toolbar-menu__arrow-ref::before {
|
|
background-color: var(--gin-bg-layer3);
|
|
}
|
|
|
|
.admin-toolbar-expanded .admin-toolbar .admin-toolbar__content .admin-toolbar__item,
|
|
.admin-toolbar-expanded .admin-toolbar .admin-toolbar__sticky-section .admin-toolbar__item {
|
|
margin-inline: var(--gin-spacing-xxs);
|
|
}
|
|
|
|
.toolbar-menu__item--to-title {
|
|
padding-inline: 6px;
|
|
|
|
.toolbar-link:hover {
|
|
color: var(--gin-color-primary-hover);
|
|
}
|
|
}
|
|
|
|
.toolbar-menu__item--level-1 .toolbar-link,
|
|
.dashboard-link .toolbar-link {
|
|
padding-inline: 10px;
|
|
}
|
|
|
|
// Fixes a quirk when the toolbar
|
|
// module is still active
|
|
.toolbar-anti-flicker.toolbar-loading.toolbar-fixed body.gin--navigation,
|
|
.toolbar-anti-flicker.toolbar-loading.toolbar-fixed.toolbar-horizontal.toolbar-tray-open body.gin--navigation {
|
|
padding-top: 0;
|
|
}
|
|
|
|
// --------------
|
|
// Text overflow
|
|
// --------------
|
|
.toolbar-menu .toolbar-link--has-icon {
|
|
&,
|
|
.toolbar-link__label {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&::before,
|
|
&::after {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
// --------------
|
|
// Sidebar toggle
|
|
// --------------
|
|
button.toolbar-link--sidebar-toggle {
|
|
background: var(--gin-bg-layer2);
|
|
|
|
&::before {
|
|
opacity: .75;
|
|
position: relative;
|
|
mask-size: var(--space-s) var(--space-s);
|
|
transition: transform var(--gin-transition);
|
|
}
|
|
|
|
&:hover::before,
|
|
&:active::before,
|
|
&:focus::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
&[aria-expanded=false]::before {
|
|
left: 1px;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
&[aria-expanded=true]::before {
|
|
left: -1px;
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
// --------------
|
|
// Icon overrides
|
|
// --------------
|
|
|
|
.toolbar-link--has-icon {
|
|
--icon: icon('fallback'); /* Default icon, aka --basic */
|
|
|
|
&::before {
|
|
width: var(--gin-icon-size-toolbar);
|
|
height: var(--gin-icon-size-toolbar);
|
|
background-color: var(--gin-icon-color);
|
|
mask-size: 100% 100%;
|
|
}
|
|
|
|
&:hover::before,
|
|
&:focus::before {
|
|
background-color: var(--gin-color-primary);
|
|
}
|
|
}
|
|
|
|
// Custom Gin Home logo
|
|
.toolbar-link--gin-home {
|
|
color: var(--gin-bg-layer2);
|
|
box-sizing: border-box;
|
|
width: 40px;
|
|
height: 40px;
|
|
max-width: 40px;
|
|
padding: 10px !important; // make the logo 32px
|
|
margin: 6px 4px 0 !important;
|
|
|
|
&, &:hover, &:focus {
|
|
background: var(--gin-color-primary) !important;
|
|
}
|
|
|
|
&::before {
|
|
--icon: #{icon('drupal')};
|
|
background: var(--gin-bg-layer2) !important;
|
|
}
|
|
|
|
span {
|
|
display: none;
|
|
}
|
|
|
|
// Navigation expanded
|
|
.admin-toolbar-expanded & {
|
|
margin-inline-start: 0;
|
|
|
|
&::before {
|
|
margin-inline-end: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toolbar-link--admin-toolbar-tools-help::before {
|
|
--icon: #{icon('tool')};
|
|
}
|
|
|
|
.toolbar-link--system-themes-page::before {
|
|
--icon: #{icon('appearance')};
|
|
}
|
|
|
|
.toolbar-link--blocks::before {
|
|
--icon: #{icon('blocks')};
|
|
}
|
|
|
|
.toolbar-link--bookmarks::before {
|
|
--icon: #{icon('bookmarks')};
|
|
}
|
|
|
|
.toolbar-link--system-admin-config::before {
|
|
--icon: #{icon('config')};
|
|
}
|
|
|
|
.toolbar-link--content::before {
|
|
--icon: #{icon('content')};
|
|
}
|
|
|
|
.toolbar-link--create::before {
|
|
--icon: #{icon('create')};
|
|
}
|
|
|
|
.toolbar-link--system-modules-list::before {
|
|
--icon: #{icon('extend-new')};
|
|
}
|
|
|
|
.toolbar-link--files::before {
|
|
--icon: #{icon('files')};
|
|
}
|
|
|
|
.toolbar-link--help::before {
|
|
--icon: #{icon('help')};
|
|
}
|
|
|
|
.toolbar-link--media::before {
|
|
--icon: #{icon('media')};
|
|
}
|
|
|
|
.toolbar-link--entity-user-collection::before {
|
|
--icon: #{icon('people-new')};
|
|
}
|
|
|
|
.toolbar-link--system-admin-reports::before {
|
|
--icon: #{icon('reports')};
|
|
}
|
|
|
|
.toolbar-link--system-admin-structure::before {
|
|
--icon: #{icon('structure')};
|
|
}
|
|
|
|
.toolbar-link--sidebar-toggle[aria-expanded=false]::before,
|
|
.toolbar-link--sidebar-toggle[aria-expanded=true]::before {
|
|
--icon: #{icon('chevron-down')};
|
|
}
|
|
|
|
.toolbar-link--user::before {
|
|
--icon: #{icon('user')};
|
|
}
|
|
|
|
// -------------
|
|
// Secondary nav
|
|
// -------------
|
|
.gin-secondary-toolbar {
|
|
// Fixes quirks when the toolbar
|
|
// module is still active
|
|
.toolbar-menu__trigger {
|
|
display: none;
|
|
}
|
|
|
|
.toolbar-tray .menu-item + .menu-item {
|
|
border-left: none;
|
|
}
|
|
|
|
.toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user {
|
|
margin-right: -1em;
|
|
}
|
|
}
|
|
|
|
// ---------
|
|
// User menu
|
|
// ---------
|
|
|
|
// Hide user menu in favor
|
|
// of secondary one
|
|
.gin--navigation .toolbar-link--user {
|
|
display: none !important;
|
|
}
|
|
|
|
// -----------------------
|
|
// Hide Toolbar on desktop
|
|
// -----------------------
|
|
#toolbar-administration {
|
|
.toolbar-menu__item--level-1 {
|
|
display: block;
|
|
}
|
|
|
|
.menu-item {
|
|
font-weight: var(--gin-font-weight-normal);
|
|
}
|
|
|
|
// Show toolbar on smaller screens for now as this is not ready yet.
|
|
@include mq(medium) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.toolbar-menu__title,
|
|
.toolbar-menu__sub-title,
|
|
.toolbar-menu__trigger {
|
|
display: none !important;
|
|
}
|