matze/farmOS-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean install

Browse Source
This commit is contained in:
matze
2024-12-10 15:08:16 +01:00
commit e14eb2d8fd
31193 changed files with 3555714 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
web/themes/gin/styles/layout/classic_toolbar.scss Normal file
View File

@@ -0,0 +1,229 @@
// 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.
@include mq(large) {
--gin-toolbar-secondary-height: 64px;
--gin-icon-size-toolbar: 16px;
--gin-scroll-offset: 200px;
.gin--edit-form {
--gin-sticky-offset: var(--gin-height-sticky);
}
}
}
.toolbar-fixed.toolbar-tray-open:not(.toolbar-vertical) {
@include mq(medium) {
--gin-toolbar-y-offset: 78px;
}
}
.gin--edit-form {
--ginStickyOffset: var(--ginStickyHeight);
}
.region-breadcrumb {
margin-top: var(--gin-spacing-m);
}
// Toolbar
.toolbar .toolbar-bar {
position: fixed;
left: 0;
width: 100%;
background: #100f10;
box-shadow: none;
}
.toolbar .toolbar-menu,
.toolbar-horizontal .menu-item > .toolbar-menu,
.toolbar-horizontal .toolbar-tray .menu-item--expanded.menu-item--expanded,
.toolbar .toolbar-tray {
background-color: var(--gin-bg-layer);
}
.toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
border-left: 1px solid var(--gin-border-color);
}
.toolbar-tray-horizontal {
ul {
li {
&.menu-item {
.menu-item {
border-bottom: 1px solid var(--gin-border-color);
}
}
}
}
}
// admin_toolbar 3.3.1 fix
.toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box a {
padding-right: 2.25em;
}
.toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle {
top: .75rem;
}
.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box a {
width: 100%;
}
.toolbar-tray a,
.toolbar-tray span,
.toolbar .toolbar-menu .toolbar-menu a,
.toolbar .toolbar-menu .toolbar-menu span {
color: var(--gin-color-text);
&:hover {
color: var(--gin-color-title);
}
}
.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
.toolbar .toolbar-tray .menu-item > .toolbar-icon.is-active,
.toolbar .toolbar-tray .menu-item > .toolbar-box > .toolbar-icon.is-active,
.toolbar .toolbar-tray a.is-active {
color: var(--gin-color-primary);
font-weight: var(--gin-font-weight-bold);
background-color: transparent;
&::before {
background: var(--gin-color-primary);
}
}
.toolbar .toolbar-tray .menu-item:hover > .toolbar-icon,
.toolbar .toolbar-tray .toolbar-menu > li:hover > a {
color: var(--gin-color-primary-hover);
background-color: var(--gin-bg-item-hover);
&::before {
background: var(--gin-color-primary);
}
}
// Inline Edit toggle
#toolbar-bar.toolbar-bar.js-settings-tray-edit-mode {
background: #100f10;
.toolbar-icon.toolbar-icon-edit.toolbar-item {
&,
&.is-active,
&:focus {
background: var(--gin-color-primary);
}
&:hover,
&.is-active:hover {
background: var(--gin-color-primary-hover);
&::before {
background: #fff;
}
}
}
}
.toolbar-tray-horizontal a:focus,
.toolbar-box a:focus,
.toolbar .toolbar-icon.toolbar-handle:focus {
background-color: var(--gin-bg-layer2);
}
.toolbar-tray-horizontal .menu-item:hover {
background-color: transparent;
}
.toolbar-menu__trigger,
.toolbar .menu-item-title,
.menu-item-sub-title {
display: none !important;
}
.gin--dark-mode .toolbar .toolbar-toggle-orientation {
background-color: var(--gin-bg-layer2);
}
.gin--classic-toolbar {
.page-wrapper__node-edit-form .layout-region-node-secondary {
padding-top: var(--gin-toolbar-y-offset); // 39px;
}
table.sticky-header {
@include mq(large) {
margin-top: 0;
}
}
}
.toolbar-menu .menu-item > span {
padding-left: 2.75em;
}
// Home icon
.toolbar .toolbar-bar .toolbar-icon-admin-toolbar-tools-help {
width: auto;
height: 100%;
text-indent: -999em;
&:before {
mask-size: 20px 20px;
}
@include mq(medium) {
&:before {
left: var(--gin-spacing-m);
}
}
}
#toolbar-item-administration-tray {
.toolbar-logo {
img {
@include mq(large) {
max-height: 21px;
}
}
}
}
.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded,
.toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus {
position: relative;
&:before {
top: var(--gin-spacing-s);
right: var(--gin-spacing-s);
}
}
#admin-toolbar-search-tab .form-item {
&::before {
top: 6px;
left: 26px;
}
}
#admin-toolbar-search-input {
padding-left: var(--gin-spacing-xl);
}
// Drupal 10.1 Toolbar loading overrides
#toolbar-item-administration-tray,
.toolbar-loading #toolbar-item-administration-tray {
border-bottom: 1px solid var(--gin-border-color);
box-shadow: 0 0 4px rgba(0,0,0,0.1);
.toolbar-lining {
background-color: var(--gin-bg-layer);
}
}

284
web/themes/gin/styles/layout/horizontal_toolbar.scss Normal file
View File

@@ -0,0 +1,284 @@
// 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.
@include mq(medium) {
--gin-toolbar-height: 53px;
--gin-toolbar-secondary-height: 60px;
--gin-scroll-offset: 180px;
--gin-icon-size-toolbar: 18px;
--gin-sticky-offset: var(--gin-height-sticky);
}
}
.gin-secondary-toolbar--frontend {
top: calc(var(--gin-toolbar-secondary-height) * -1);
}
// Toolbar
.toolbar {
.toolbar-bar {
position: fixed;
left: 0;
width: 100%;
background: #100f10;
box-shadow: none;
@include mq(medium) {
display: flex;
background: none;
}
@include mq(medium) {
height: 0;
}
.toolbar-menu-administration {
> .toolbar-menu {
> .menu-item {
> .toolbar-icon,
> .toolbar-box > .toolbar-icon:not(.toolbar-handle) {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 3.25em;
padding-right: 1.25em;
white-space: nowrap;
&::before {
inset-inline-start: 1em;
}
}
> .toolbar-box > .toolbar-icon:not(.toolbar-handle)::before {
left: var(--gin-spacing-s);
}
}
}
}
.toolbar-toggle-orientation {
display: none !important;
}
}
}
.toolbar-tray-vertical .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle {
width: 3rem;
&:before {
left: var(--gin-spacing-m);
}
}
.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box a {
width: 100%;
}
.toolbar-horizontal .toolbar-tray {
border-bottom: 0 none;
}
.toolbar .toolbar-menu,
.toolbar-horizontal .menu-item > .toolbar-menu,
.toolbar-horizontal .toolbar-tray .menu-item--expanded.menu-item--expanded,
.toolbar .toolbar-tray {
background-color: var(--gin-bg-layer);
}
.toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
border-left: 1px solid var(--gin-border-color);
}
.toolbar-tray a,
.toolbar-tray span,
.toolbar .toolbar-menu .toolbar-menu a,
.toolbar .toolbar-menu .toolbar-menu span {
color: var(--gin-color-text);
&:hover {
color: var(--gin-color-title);
}
}
.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
.toolbar .toolbar-tray .menu-item > .toolbar-icon.is-active,
.toolbar .toolbar-tray .menu-item > .toolbar-box > .toolbar-icon.is-active,
.toolbar .toolbar-tray a.is-active {
color: var(--gin-color-primary);
font-weight: var(--gin-font-weight-bold);
background-color: transparent;
&::before {
background: var(--gin-color-primary);
}
}
.toolbar .toolbar-tray .hover-intent > .toolbar-icon,
.toolbar .toolbar-tray .hover-intent > .toolbar-box > .toolbar-icon:not(.toolbar-handle) {
color: var(--gin-color-primary-hover);
background-color: var(--gin-bg-item-hover);
&::before,
+ .toolbar-handle::before {
background-color: var(--gin-color-primary);
}
}
.toolbar-tray-horizontal a:focus,
.toolbar-box a:focus,
.toolbar .toolbar-icon.toolbar-handle:focus {
background-color: var(--gin-bg-layer2);
}
.toolbar-menu__trigger,
.toolbar .menu-item-title,
.menu-item-sub-title {
display: none !important;
}
.gin--dark-mode .toolbar .toolbar-toggle-orientation {
background-color: var(--gin-bg-layer2);
}
.gin--classic-toolbar {
table.sticky-header {
@include mq(large) {
margin-top: 0;
}
}
}
#toolbar-item-administration-tray {
.toolbar-logo {
display: flex;
height: 100%;
+ .toolbar-handle {
display: none;
}
}
}
.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded,
.toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus {
position: relative;
&:before {
top: 12px;
right: 12px;
}
}
.toolbar-tray-horizontal .menu-item:hover {
background-color: transparent;
}
.gin--horizontal-toolbar.gin--edit-form .page-wrapper__node-edit-form .layout-region-node-secondary {
@include mq(large) {
top: var(--gin-toolbar-height);
height: calc(100% - var(--gin-toolbar-height));
}
}
// Main horizontal nav
.gin--horizontal-toolbar #toolbar-administration {
@include mq(medium) {
z-index: 502;
position: fixed;
top: 0;
width: 100%;
&,
.toolbar-bar {
height: var(--gin-toolbar-height);
background: var(--gin-bg-layer);
}
}
// align with content nicely
.toolbar-lining {
@include mq(medium) {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-right: 0;
}
}
// home tab
.menu-item__tools,
.menu-item__admin_toolbar_tools-help {
@include mq(medium) {
margin-left: calc(var(--gin-spacing-m) * -1);
}
}
// home logo
.toolbar-icon-admin-toolbar-tools-help {
width: auto;
height: 100%;
text-indent: -999em;
&:before {
mask-size: 20px 20px;
}
@include mq(medium) {
padding-left: 2.875em;
&:before {
top: -1px;
left: 14px;
width: 24px;
mask-size: 28px 28px;
}
}
}
// target fist level only
.toolbar-menu-administration {
@include mq(medium) {
margin-left: m#{i}n(5vw, var(--gin-spacing-xxl));
margin-right: m#{i}n(5vw, var(--gin-spacing-xxl));
> .toolbar-menu {
display: flex;
flex-wrap: nowrap;
width: 100%;
}
}
// Hover
.menu-item .menu-item:hover > .toolbar-icon {
color: var(--gin-color-primary-hover);
background: var(--gin-color-primary-light);
}
// Active
.menu-item> .toolbar-icon.is-active {
color: var(--gin-color-primary-active);
background: var(--gin-bg-item-hover);
}
}
}
// Drupal 10.1 Toolbar loading overrides
#toolbar-item-administration-tray,
.toolbar-loading #toolbar-item-administration-tray {
box-shadow: 0 0 4px rgba(0, 0, 0, .1),
0 2px 6px 2px rgba(0, 0, 0, .03);
.gin--dark-mode & {
box-shadow: 0 0 4px rgba(0, 0, 0, .3);
}
}
// Classes that hide submenus are not available until the toolbar has
// initialized, so hide them until loading is complete.
.toolbar-loading .menu-item--expanded > .toolbar-menu {
display: none;
}

488
web/themes/gin/styles/layout/navigation.scss Normal file
View File

@@ -0,0 +1,488 @@
// -------
// 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;
}

620
web/themes/gin/styles/layout/toolbar.scss Normal file
View File

@@ -0,0 +1,620 @@
// Toolbar Variables
:root {
--gin-toolbar-height: 39px;
--gin-toolbar-secondary-height: 48px;
--gin-scroll-offset: 72px;
--gin-toolbar-y-offset: var(--gin-toolbar-height); // Needs px to work in calc() functions.
--gin-toolbar-x-offset: 0px; // Needs px to work in calc() functions.
--gin-sticky-offset: 0px; // Needs px to work in calc() functions.
@include mq(medium) {
--gin-toolbar-height: 0px; // Needs px to work in calc() functions.
--gin-toolbar-secondary-height: 60px;
--gin-icon-size-toolbar: 22px;
--gin-scroll-offset: 130px;
--gin-toolbar-x-offset: var(--gin-toolbar-width-collapsed);
--gin-sticky-offset: var(--gin-height-sticky);
}
}
.toolbar-fixed[data-toolbar-menu=open] {
@include mq(medium) {
--gin-toolbar-x-offset: var(--gin-toolbar-width, 240px);
}
}
// Toolbar
#toolbar-item-administration-tray {
@include mq(medium) {
border: 0 none;
}
}
.toolbar {
.toolbar-bar {
box-shadow: none;
// Reset `box-shadow` style from the `.toolbar-bar` class if we use RTL mode.
[dir="rtl"] & {
box-shadow: none;
}
@include mq(xsmall) {
display: flex;
}
@include mq(large) {
height: 0;
}
.toolbar-tab > .toolbar-item {
font-weight: var(--gin-font-weight-normal);
}
#toolbar-item-administration-tray .toolbar-icon,
.toolbar-tab > .toolbar-icon-edit.toolbar-item {
&::before {
@include mq(medium) {
left: calc((var(--gin-toolbar-width-collapsed) - var(--gin-icon-size-toolbar)) / 2 - 9px);
width: var(--gin-icon-size-toolbar);
height: var(--gin-icon-size-toolbar);
top: 50%;
transform: translateY(-50%);
}
}
}
.toolbar-tab > .toolbar-icon-edit.toolbar-item::before {
@include mq($to: xsmall) {
left: 0;
}
}
@include mq(medium) {
// Toolbar logo
.toolbar-logo {
height: var(--gin-height-sticky);
&:hover,
&:focus {
z-index: 3;
position: relative;
}
}
// Admin tray: Home icon
.toolbar-icon-home {
display: block;
width: 100%;
margin: var(--gin-spacing-xs) 0;
}
#toolbar-item-administration-tray a.toolbar-icon.override-icon {
&:before {
left: 0;
width: 0;
content: none;
}
}
}
// Custom logo
#toolbar-item-administration-tray .toolbar-logo {
display: block;
padding: var(--gin-spacing-xs) 0;
img {
max-width: calc(var(--gin-toolbar-width-collapsed) - 1px);
max-height: 40px;
}
}
#toolbar-item-administration-tray a.toolbar-icon-admin-toolbar-tools-help.toolbar-icon-default {
@include mq(medium) {
height: 74px;
margin-bottom: 6px;
transition: top var(--gin-transition);
}
&::before {
$logoSize: 32px;
@include mq(medium) {
width: $logoSize;
height: $logoSize;
left: calc((var(--gin-toolbar-width-collapsed) - #{$logoSize}) / 2 - 9px);
mask-size: $logoSize $logoSize;
mask-position: center center;
}
}
&:hover::before {
background: var(--gin-color-primary);
}
&::after {
display: none;
}
&:focus {
z-index: 3;
background: var(--gin-color-primary-light);
box-shadow: none;
box-shadow: inset 0 0 0 1px var(--gin-color-focus-border),
inset 0 0 0 4px var(--gin-color-focus);
&::before {
background: var(--gin-color-primary-active);
}
}
}
}
}
.toolbar-tray a,
.toolbar-tray a:visited,
.toolbar-tray span {
color: var(--gin-color-text);
}
#gin-toolbar-bar.js-settings-tray-edit-mode {
justify-content: flex-end;
}
#toolbar-item-administration-tray a.toolbar-icon.override-icon {
&:before {
@include mq(medium) {
left: 0;
width: 0;
content: none;
}
}
}
.toolbar .toolbar-bar {
position: fixed;
left: 0;
width: 100%;
}
.toolbar .toolbar-menu {
background: transparent;
.toolbar-menu a,
.toolbar-menu span {
color: var(--gin-color-text);
}
}
.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box > a.toolbar-icon,
.toolbar .toolbar-tray a.is-active {
color: var(--gin-color-primary);
font-weight: var(--gin-font-weight-semibold);
text-decoration: none;
background-color: transparent;
@include mq($to: medium) {
width: 100%;
background: var(--gin-color-primary-light);
}
}
// Mobile: hide menu titles
.toolbar-menu__title,
.toolbar-menu__sub-title,
a.toolbar-menu__trigger,
.toolbar-menu__logo {
display: none;
}
// New Desktop Toolbar
@include mq(medium) {
#toolbar-item-administration-tray {
display: block;
}
.toolbar .toolbar-menu .toolbar-menu {
background: var(--gin-bg-app);
}
.toolbar-fixed {
transition: var(--gin-transition);
}
.toolbar .toolbar-box {
position: static;
}
.toolbar-tab > .toolbar-item {
&.toolbar-icon-menu {
display: none;
}
}
.toolbar-menu-administration a.toolbar-menu__trigger {
position: fixed;
left: 0;
bottom: 0;
font-size: var(--gin-font-size-s);
color: var(--gin-color-text-light);
text-decoration: none;
display: flex;
align-items: center;
width: var(--gin-toolbar-width-collapsed);
height: 64px;
padding: var(--gin-spacing-m) 0 var(--gin-spacing-m) var(--gin-toolbar-width-collapsed);
margin: 0;
transition: width var(--gin-transition);
overflow: hidden;
&, &:active, &:focus {
background-color: transparent;
}
&:hover,
&:focus {
&::before {
background-color: var(--gin-color-title);
}
}
&::before {
content: "";
position: absolute;
left: calc((var(--gin-toolbar-width-collapsed) - 36px) / 2);
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--gin-border-color);
background: var(--gin-bg-layer) url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1.7109375,0.31445312 0.2890625,1.7226562 5.5917969,7.0761719 0.2890625,12.429688 1.7109375,13.837891 8.4082031,7.0761719 Z' fill='%23999999'/%3E%3C/svg%3E") no-repeat center center;
background-size: 11px 11px;
transition: transform var(--gin-transition);
@media (forced-colors: active) {
background: var(--gin-bg-layer) url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1.7109375,0.31445312 0.2890625,1.7226562 5.5917969,7.0761719 0.2890625,12.429688 1.7109375,13.837891 8.4082031,7.0761719 Z' fill='linkText'/%3E%3C/svg%3E") no-repeat center center;
}
}
&:focus::before {
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
}
&.is-active {
display: flex;
font-weight: var(--gin-font-weight-normal);
color: var(--gin-color-text-light);
width: var(--gin-toolbar-width);
&:hover {
color: var(--gin-color-title);
}
&:before {
transform: rotate(180deg);
}
}
.menu {
display: none;
}
.close {
display: inline;
}
}
.toolbar-tab--toolbar-item-administration {
order: -1;
}
.toolbar-menu-administration {
display: flex;
position: fixed;
top: auto;
left: 0;
width: var(--gin-toolbar-width-collapsed);
height: 100vh;
max-width: calc(100% - var(--gin-toolbar-height));
background: var(--gin-bg-layer);
border-right: 1px solid var(--gin-border-color-layer);
transition: var(--gin-transition);
.gin--dark-mode & {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
[data-toolbar-menu='open'] & {
width: var(--gin-toolbar-width);
}
.toolbar-tray-horizontal & {
ul li.menu-item--expanded .menu-item.hover-intent ul,
ul li.menu-item--expanded .menu-item:focus-within ul {
margin-top: 0;
margin-left: calc(var(--gin-toolbar-width) - 2px);
}
// admin_toolbar 3.3.1 fix
// hide for vertical toolbar
.toolbar-icon.toolbar-handle {
display: none !important;
}
}
// Open Menu
.toolbar-vertical & {
width: var(--gin-toolbar-width);
> .toolbar-menu {
> .menu-item {
border-top: 0 none;
border-bottom: 0 none;
> .toolbar-icon,
> .toolbar-box > .toolbar-icon {
width: auto;
padding-left: calc(var(--gin-spacing-xxl) + var(--gin-spacing-xs))
}
.toolbar-menu {
left: var(--gin-toolbar-width);
}
}
}
}
> .toolbar-menu {
align-self: flex-start;
height: 100%;
max-height: calc(100% - var(--gin-toolbar-width-collapsed));
overflow-y: auto;
background: transparent;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
overflow-x: hidden;
> .menu-item {
> .toolbar-icon,
> .toolbar-box > .toolbar-icon {
font-size: var(--gin-font-size);
font-weight: 475;
letter-spacing: -.0125rem;
color: var(--gin-color-text);
display: flex;
align-items: center;
width: calc(var(--gin-toolbar-x-offset) - var(--gin-spacing-m));
height: 48px;
padding-left: calc(var(--gin-toolbar-width-collapsed) - var(--gin-spacing-m));
padding-right: 0;
margin: 0 var(--gin-spacing-xs) 1px;
border-radius: var(--gin-border-m);
overflow: hidden;
transition: width var(--gin-transition);
&:hover {
color: var(--gin-color-primary);
background-color: transparent;
}
&.is-active {
color: var(--gin-color-primary-active);
font-weight: var(--gin-font-weight-semibold);
&:before {
background: var(--gin-color-primary);
}
}
&.toolbar-handle {
width: var(--gin-toolbar-width-collapsed);
&:before {
display: none;
}
}
}
.toolbar-menu {
display: none;
top: 0;
margin-left: calc(var(--gin-toolbar-x-offset) - 1px);
height: 100vh;
max-width: calc(100% - var(--gin-toolbar-height));
box-shadow: none;
border-left: 1px solid var(--gin-border-color-layer);
transition: margin-left var(--gin-transition);
overflow-y: auto;
overflow-x: hidden;
&,
[dir] & {
position: fixed;
width: var(--gin-toolbar-width);
}
// Link color
a,
span {
color: var(--gin-color-text);
&.is-active {
color: var(--gin-color-primary);
font-weight: var(--gin-font-weight-semibold);
background: var(--gin-color-primary-light);
&:hover {
color: var(--gin-color-primary-hover);
background: var(--gin-color-primary-light-hover);
}
}
}
&__title,
&__sub-title {
position: relative;
display: block;
min-height: 36px;
font-size: var(--gin-font-size-h3);
letter-spacing: -.025em;
padding: 0;
margin: var(--gin-spacing-m) var(--gin-spacing-s) calc(var(--gin-spacing-l) - var(--gin-spacing-xxs)) var(--gin-spacing-s);
a {
font-weight: var(--gin-font-weight-semibold);
color: var(--gin-color-title);
padding: var(--gin-spacing-s);
border-radius: var(--gin-border-m);
}
}
&__sub-title {
font-size: var(--gin-font-size-xl);
letter-spacing: -.01em;
margin-bottom: 1.275rem;
a {
padding: .9rem var(--gin-spacing-s);
}
}
.menu-item {
float: none;
border-top: 0 none;
border-left: 0 none;
border-bottom: 0 none;
.toolbar-icon {
font-size:var(--gin-font-size);
display: block;
width: 100%;
max-width: calc(100% - var(--gin-spacing-l));
padding: var(--gin-spacing-s) var(--gin-spacing-xl) var(--gin-spacing-s) var(--gin-spacing-s);
margin: .25em var(--gin-spacing-s);
border-radius: var(--gin-border-m);
overflow: hidden;
}
}
}
}
// Shadow as scrolling indicator
&, .toolbar-menu {
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;
}
.toolbar-menu {
background-size: 100% 40px, 100% 40px, 100% 24px, 100% 24px;
}
}
.menu-item.hover-intent > .toolbar-menu,
.menu-item:focus-within > .toolbar-menu {
z-index: 2;
display: block;
border-right: 1px solid rgba(0,0,0,.075);
box-shadow: 7px 0 16px rgba(0,0,0,.075),
-12px 0 0 0 var(--gin-bg-layer);
}
.menu-item .menu-item:hover > .toolbar-icon,
.menu-item .menu-item:focus-within > .toolbar-icon,
.menu-item .menu-item:hover > .toolbar-box > .toolbar-icon,
.menu-item .menu-item:focus-within > .toolbar-box > .toolbar-icon {
color: var(--gin-color-primary-hover);
background: var(--gin-color-primary-light);
}
}
// Hide Drupal's default toggle for sidebar
.toolbar .toolbar-toggle-orientation button {
display: none;
}
}
.toolbar .toolbar-icon.toolbar-handle:focus {
background-color: rgba(255, 255, 255, .1);
}
#toolbar-item-administration-search-tray input {
width: 100%;
max-width: calc(100% - var(--gin-spacing-m));
outline: none;
}
.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded,
.toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus {
position: relative;
&::before {
z-index: 1;
top: 1em;
right: 20px;
}
}
// New Main level hover; needs refactoring at some point.
.toolbar-menu-administration > .toolbar-menu > .menu-item {
&:hover {
background: transparent;
}
&:hover > .toolbar-icon,
&:hover > .toolbar-box > a.toolbar-icon,
> .toolbar-icon:focus,
&.menu-item--active-trail > .toolbar-icon,
&.menu-item--active-trail:hover > .toolbar-icon,
&.menu-item--active-trail > .toolbar-box > a.toolbar-icon {
@include mq(medium) {
color: var(--gin-color-primary-hover);
box-shadow: none;
&::before {
background: var(--gin-color-primary-active);
}
&::after {
content: "";
display: block;
position: absolute;
top: 3px;
left: calc((var(--gin-toolbar-width-collapsed) - var(--gin-spacing-xl) - var(--gin-spacing-xs)) / 2 - 9px);
width: calc(100% - 10px);
height: 42px;
background: var(--gin-color-primary-light);
border-radius: var(--gin-border-m);
}
&:focus {
background: transparent;
&::after {
box-shadow: inset 0 0 0 1px var(--gin-color-focus-border), inset 0 0 0 4px var(--gin-color-focus);
}
}
}
}
&.menu-item--active-trail > .toolbar-icon,
&.menu-item--active-trail > .toolbar-box > a.toolbar-icon,
> .toolbar-icon.is-active {
@include mq(medium) {
&::after {
background: var(--gin-bg-item-hover);
}
}
}
}
// Drupal 10.1 Toolbar loading overrides
#toolbar-item-administration-tray,
.toolbar-loading #toolbar-item-administration-tray {
box-shadow: none;
}