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

143
web/themes/gin/styles/navigation/admin-toolbar.scss Normal file
View File

@@ -0,0 +1,143 @@
/**
* @file
* Admin Toolbar styles.
*/
/**
* Sidebar width is attached to the <body> element because it's used as a
* fallback value to the margin-inline-start property of the layout container.
*/
body {
--sidebar-width: 64px;
.admin-toolbar-expanded & {
--sidebar-width: 264px;
}
}
/**
* This zero height div has the [data-offset-left] attribute for
* Drupal.displace() to measure. It purposefully does not have any transitions
* because we want Drupal.displace() to measure the width immediately
*/
.admin-toolbar__displace-placeholder {
position: absolute;
top: 0;
left: 0;
width: var(--sidebar-width);
}
/**
* The Admin toolbar component.
*/
.admin-toolbar {
display: flex;
flex-direction: column;
box-sizing: border-box;
border-inline-end: 1px solid #aaa;
background-color: white;
border-inline-end: 1px solid var(--color-gray-100);
font-size: var(--font-size-base);
inline-size: var(--sidebar-width);
position: fixed;
height: 100vh;
z-index: 501;
padding-inline: var(--space-xs);
padding-block-start: var(--space-xs);
overflow-y: scroll;
@media only screen and (max-height: 300px) {
min-height: 20rem;
}
& ~ .dialog-off-canvas-main-canvas {
// Gin Custom start ---------------------
@include mq(medium) {
margin-inline-start: var(--drupal-displace-offset-left, var(--sidebar-width));
transition: margin-inline-start 0.2s linear;
}
// Gin Custom end ------------------------
}
.admin-toolbar-expanded & {
overflow-y: auto;
}
// Gin Custom start ---------------------
// *:focus {
// outline: 4px solid var(--color-focus);
// }
// Gin Custom end ------------------------
}
/* @todo: Correct the class name with a BEM modifier. */
.admin-toolbar-expanded .admin-toolbar {
/* Sticky section at the bottom */
& .admin-toolbar__sticky-section {
padding-inline: var(--space-xs);
}
& .admin-toolbar__content, /* Menu <nav> */
& .admin-toolbar__sticky-section {
& .admin-toolbar__item {
margin-inline: var(--space-xs);
}
}
}
.admin-toolbar__item {
flex: 1 0 100%;
}
.admin-toolbar__logo {
display: inline-block;
margin-block-start: var(--space-xs);
margin-inline-start: var(--space-xs);
border-radius: var(--space-xs);
overflow: hidden;
&:hover {
background-color: transparent;
}
&:focus {
outline: 4px solid var(--color-focus);
}
& img {
display: block;
}
}
/**
* Middle Content region.
* Region where most of the content will be printed.
*/
.admin-toolbar__content {
&:not(:last-child) {
margin-block-end: 20px;
}
}
/**
* Sticky bottom region.
* Region with less used items and button for collapse.
*/
.admin-toolbar__sticky-section {
background-color: white;
margin-block-start: auto;
position: sticky;
bottom: 0;
z-index: 40;
margin-inline: -8px;
width: calc(100% + var(--space-m));
border-block-start: 1px solid transparent;
box-sizing: inherit;
padding-block: var(--space-m);
padding-inline: var(--space-xs);
&.shadow {
box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.14);
border-color: var(--color-gray-100);
}
}

29
web/themes/gin/styles/navigation/toolbar-block.scss Normal file
View File

@@ -0,0 +1,29 @@
/**
* @file
* Toolbar block styles.
*/
.toolbar-block__title {
padding-inline: 5px 10px;
font-size: var(--font-size-xxs);
font-weight: 600;
color: var(--color-gray-600);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-block: var(--space-l) var(--space-s);
}
/* Add extra space when the title is hidden. */
.toolbar-block__title.visually-hidden + .toolbar-block__content {
margin-block-start: var( --space-l);
}
/* Temporarily hide titles on collapse. */
html:not(.admin-toolbar-expanded) {
& .admin-toolbar__content .admin-toolbar__item,
& .admin-toolbar__sticky-section {
& .toolbar-block__title {
display: none;
}
}
}

230
web/themes/gin/styles/navigation/toolbar-link.scss Normal file
View File

@@ -0,0 +1,230 @@
/**
* @file
* Toolbar linke styles.
*/
.toolbar-link {
position: relative;
padding-block: 10px;
padding-inline: 0;
color: var(--color-gray-800);
text-decoration: none;
flex-grow: 1;
font-weight: 700;
border-radius: var(--space-xs);
line-height: 1.2;
background: none;
border: none;
&:hover {
z-index: 20;
}
// Gin Custom start ---------------------
// &:focus {
// outline: 4px solid var(--color-focus);
// outline-offset: -4px;
// z-index: 10;
// }
// Gin Custom end ------------------------
& + .toolbar-menu__item--has-dropdown > button {
margin-inline-start: 4px;
}
}
/**
* Specific styles when toolbar-link is a button that toggles a submenu or
* content.
*/
button.toolbar-link {
border: 0;
z-index: 1;
display: flex;
align-items: center;
background-color: transparent;
cursor: pointer;
text-align: left;
/* Chevron styles. */
&:not(.toolbar-link--sidebar-toggle)::after {
display: block;
block-size: var(--space-s);
inline-size: var(--space-s);
mask-size: var(--space-s);
mask-repeat: no-repeat;
mask-position: center center;
background-color: var(--color-gray-500);
// Gin Custom start ---------------------
mask-image: icon('chevron-down');
// mask-image: url(../../assets/icons/chevron-down.svg);
// Gin Custom end ------------------------
content: "";
margin-inline-start: auto;
}
&:hover::after,
&:focus::after {
background-color: var(--color-blue-700);
}
& + a {
margin-inline-end: var(--space-xl);
}
}
/* Chevron styles when the item is expanded. */
.toolbar-menu__item--expanded.toolbar-menu__item--has-dropdown > button::after {
transform: rotate(180deg);
}
/* Sidebar collapsed styles.*/
html:not(.admin-toolbar-expanded) {
& .toolbar-link {
padding-inline: 10px;
padding-block: 10px;
flex-grow: unset;
flex-basis: 100%;
// Gin Custom start ---------------------
// justify-content: center;
// Gin Custom end ------------------------
}
/* Specific styles for the title duplicated for the flyout. */
& .toolbar-menu__item--to-title > .toolbar-link {
display: flex;
align-items: center;
&:hover {
background-color: unset;
}
}
/* Hide the chevron when toolbar collapsed. */
.toolbar-menu__item--has-dropdown.toolbar-menu__item--level-1,
.toolbar-menu__item--to-title {
> button.toolbar-link::after {
content: unset;
}
}
}
.toolbar-link--sidebar-toogle {
background: none;
border: none;
cursor: pointer;
line-height: 1;
&:hover,
&:focus {
background-color: var(--color-gray-050);
}
}
.toolbar-link--has-icon {
display: flex;
align-items: center;
& span {
opacity: 1;
transition: opacity .4s ease;
}
&::before {
// --icon: url(../../assets/icons/basic.svg); /* Default icon, aka --basic */
content: '';
width: 20px;
height: 20px;
display: block;
background-color: var(--color-gray-800);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 100% auto;
mask-image: var(--icon);
}
}
.admin-toolbar-expanded .toolbar-link--has-icon::before {
margin-inline-end: 10px;
}
.current > .toolbar-link--has-icon::before {
background-color: var(--color-blue-600);
}
// Gin Custom start ---------------------
// .toolbar-link--system-themes-page::before {
// --icon: url(../../assets/icons/appearance.svg);
// }
// .toolbar-link--blocks::before {
// --icon: url(../../assets/icons/blocks.svg);
// }
// .toolbar-link--bookmarks::before {
// --icon: url(../../assets/icons/bookmarks.svg);
// }
// .toolbar-link--system-admin-config::before {
// --icon: url(../../assets/icons/config.svg);
// }
// .toolbar-link--content::before {
// --icon: url(../../assets/icons/content.svg);
// }
// .toolbar-link--create::before {
// --icon: url(../../assets/icons/create.svg);
// }
// .toolbar-link--system-modules-list::before {
// --icon: url(../../assets/icons/extend.svg);
// }
// .toolbar-link--files::before {
// --icon: url(../../assets/icons/files.svg);
// }
// .toolbar-link--help::before {
// --icon: url(../../assets/icons/help.svg);
// }
// .toolbar-link--media::before {
// --icon: url(../../assets/icons/media.svg);
// }
// .toolbar-link--entity-user-collection::before {
// --icon: url(../../assets/icons/people.svg);
// }
// .toolbar-link--system-admin-reports::before {
// --icon: url(../../assets/icons/reports.svg);
// }
// .toolbar-link--system-admin-structure::before {
// --icon: url(../../assets/icons/structure.svg);
// }
// .toolbar-link--sidebar-toggle[aria-expanded=true]::before {
// --icon: url(../../assets/icons/toggle-collapse.svg);
// }
// .toolbar-link--sidebar-toggle[aria-expanded=false]::before {
// --icon: url(../../assets/icons/toggle-expand.svg);
// }
// .toolbar-link--user::before {
// --icon: url(../../assets/icons/user.svg);
// }
// Gin Custom end ------------------------
/* Visually-hidden button text. */
.toolbar-link__action {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

329
web/themes/gin/styles/navigation/toolbar-menu.scss Normal file
View File

@@ -0,0 +1,329 @@
/**
* @file
* Admin Toolbar menus styles.
*/
.toolbar-menu {
margin: 0;
padding: 0;
list-style: none;
& a {
display: block;
line-height: 1;
}
& .toolbar-link--has-icon {
display: flex;
align-items: center;
}
& .toolbar-menu__item {
list-style: none;
padding-block-start: 0;
word-break: break-word;
hyphens: auto;
}
& .toolbar-menu__item--to-title {
margin-block: var(--space-s) var(--space-xs);
margin-inline-start: var(--space-xs);
}
& .toolbar-menu__item--level-2 {
margin-inline-start: var(--space-m);
}
}
/* Add extra bottom space to the main menu in the flyout. */
.cloned-flyout > .toolbar-menu {
padding-block-end: var(--space-l);
}
.toolbar-menu__submenu {
flex: 1 0 100%;
}
/* Toolbar menu item. */
.toolbar-menu__item {
display: flex;
align-items: center;
justify-content: space-between;
background-color: transparent;
font-weight: 700;
position: relative;
flex-wrap: nowrap;
&.toolbar-menu__item--expanded > .toolbar-link {
color: var(--color-blue-700);
}
&.current > .toolbar-link {
color: var(--color-blue-600);
}
&:not(.toolbar-menu__item--expanded) > .toolbar-menu__submenu,
&:not(.toolbar-menu__item--expanded) > ul.toolbar-menu {
display: none;
}
&:not(.toolbar-menu__item--level-1) {
white-space: normal;
}
& .toolbar-menu {
flex-basis: 100%;
}
&.toolbar-menu__item--expanded:not(.current) > .toolbar-link {
color: var(--color-gray-950);
&::before {
background-color: var(--color-gray-950);
}
}
&.toolbar-menu__item--expanded:not(.current) > .toolbar-link:hover {
color: var(--color-blue-700);
}
&:not(.toolbar-menu__item--to-title) .toolbar-link {
&:hover,
&:focus {
color: var(--color-blue-700);
}
}
&:not(.toolbar-menu__item--to-title) .toolbar-link--has-icon {
&:hover::before,
&:focus::before {
background-color: var(--color-blue-700);
}
}
&.toolbar-menu__item--has-dropdown.toolbar-menu__item--expanded {
flex-wrap: wrap;
}
}
.toolbar-menu__item--level-2 .toolbar-menu__item--has-dropdown > button::after {
mask-size: var(--space-xs);
}
/* Duplicated level-1 toolbar-link to use as title in the flyout. */
.toolbar-menu__item--to-title {
color: var(--color-gray-800);
justify-content: flex-start;
align-items: center;
& .toolbar-link__label {
margin-inline-start: var(--space-xs);
}
}
.toolbar-menu__item--user {
margin-block-start: 10px;
& .navigation-box,
& .toolbar-menu__item--has-dropdown > button[aria-expanded="true"] {
background-color: transparent;
}
& .toolbar-menu__item {
background-color: transparent;
}
}
.toolbar-menu__item--level-1 {
border-radius: var(--space-xs);
font-size: var(--font-size-s);
white-space: nowrap;
&.toolbar-menu__item--expanded {
background-color: var(--color-gray-050);
}
& > .toolbar-link {
padding-inline: 5px 10px;
border-radius: var(--space-xs);
&:hover,
&:focus {
background-color: var(--color-gray-050);
}
// Gin Custom start ---------------------
// &:hover {
// outline: 4px solid var(--color-blue-100);
// }
// Gin Custom end ------------------------
&:focus {
outline-offset: 0;
}
}
& > .toolbar-menu__item--has-dropdown > button {
inline-size: 40px;
block-size: 40px;
}
&.toolbar-menu__item--expanded,
&.current {
background-color: var(--color-gray-050);
}
&.toolbar-menu__item--expanded {
font-weight: 700;
}
& .toolbar-menu > .toolbar-menu__item--to-title {
display: none;
}
}
/* Current page dot indicator. */
.toolbar-menu__item--level-2,
.toolbar-menu__item--level-3 {
position: relative;
font-size: var(--font-size-xs);
&.current > .toolbar-link::after {
content: '';
inline-size: var(--space-xs);
block-size: var(--space-xs);
position: absolute;
left: -11px;
top: 10px;
border-radius: 50%;
background-color: var(--color-blue-600);
z-index: 1;
}
&:not(.current) > .toolbar-link:hover::before {
background-color: var(--color-blue-700);
inline-size: 2px;
}
}
/* Left grey border for submenu items. */
.toolbar-menu__item--level-2 > .toolbar-link,
.toolbar-menu__item--level-3 > .toolbar-link,
.toolbar-menu__item--level-2.toolbar-menu__item--expanded > .toolbar-menu {
&::before {
content: '';
block-size: 100%;
inline-size: 1px;
position: absolute;
left: -8px;
top: 0;
background-color: var(--color-gray-300);
}
}
.toolbar-menu__item--level-2.toolbar-menu__item--expanded > .toolbar-menu::before {
left: 0;
}
.toolbar-menu__item--level-2 {
& .toolbar-link {
font-weight: 600;
&:hover {
/* umami override */
background-color: var(--color-gray-050);
z-index: 9;
}
}
& > .toolbar-link {
padding-inline: var(--space-xs);
margin-inline-start: var(--space-xs);
}
& > .toolbar-menu {
padding-block: var(--space-xs);
}
}
.toolbar-menu__item--level-3.toolbar-menu__item {
margin-inline-start: var(--space-l);
& > .toolbar-link {
padding-inline-start: var(--space-s);
}
}
/* Collapsed styles.*/
html:not(.admin-toolbar-expanded) {
/* First level specific styles. */
& .admin-toolbar__item > .toolbar-menu {
display: flex;
flex-direction: column;
align-items: center;
}
& .toolbar-menu__item--level-1 {
display: inline-block;
& > .toolbar-link span,
& > .toolbar-menu__item--has-dropdown > button {
display: none;
opacity: 0;
}
& > .toolbar-menu__submenu {
display: none;
}
& .toolbar-menu__item--to-title {
display: inline-block;
}
}
& .toolbar-menu__submenu {
position: relative;
}
/* Cloned flyout. */
& .cloned-flyout {
position: absolute;
top: 0;
left: calc(100% + 8px);
width: 248px;
background-color: var(--color-gray-050);
border-radius: var(--space-xs);
padding-inline-end: var(--space-xs);
box-shadow: 0px 0px 56px 0px rgba(0,0,0,0.14);
height: fit-content;
z-index: 601;
& .toolbar-menu__arrow-ref {
display: block;
position: absolute;
inline-size: 46px;
block-size: 46px;
display: flex;
align-items: center;
margin-inline-start: -2px;
&::before {
content: '';
width: 14px;
height: 14px;
background-color: var(--color-gray-050);
transform: rotate(45deg);
z-index: 20;
}
}
& .toolbar-menu__item--level-2 {
margin-inline-start: calc(var(--space-l) + var( --space-xs));
}
}
}
.toolbar-menu__arrow-ref {
display: none;
}

26
web/themes/gin/styles/navigation/tooltip.scss Normal file
View File

@@ -0,0 +1,26 @@
/**
* @file
* Tooltip styles.
*/
.tooltip,
.cloned-tooltip {
position: absolute;
top: var(--space-xs);
left: 100%;
background-color: var(--color-gray-950);
color: white;
padding: 0.25rem var(--space-xs);
border-radius: var(--space-xs);
font-size: var(--font-size-xxs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: var(--space-m);
z-index: 601;
}
/* Hide the origin value of the Tooltip if the Admin toolbar is expanded. */
html:not(.admin-toolbar-expanded) .toolbar-menu__item--level-1:not(.toolbar-menu__item--has-dropdown) .toolbar-link span {
display: none;
}

36
web/themes/gin/styles/navigation/variables.scss Normal file
View File

@@ -0,0 +1,36 @@
.gin--navigation {
/*
* Color Palette.
*/
--color-focus: var(--gin-color-focus);
--drupal--brand-blue: var(--gin-color-primary);
/* Blue variations. */
--color-blue-100: var(--gin-color-primary-light);
--color-blue-600: var(--gin-color-primary);
--color-blue-700: var(--gin-color-primary-hover);
/* Gray variations. */
--color-gray-050: rgba(var(--gin-color-primary-light-rgb), .25);
--color-gray-100: #DEDFE4;
--color-gray-300: #C1C2C7;
--color-gray-500: #919297;
--color-gray-600: #828388;
--color-gray-700: #75767B;
--color-gray-800: #55565B;
--color-gray-900: #393A3F;
--color-gray-950: #232429;
/**
* Spaces.
*/
--space-xl: var(--gin-spacing-xl);
--space-l: var(--gin-spacing-l);
--space-m: var(--gin-spacing-m);
--space-s: var(--gin-spacing-s);
--space-xs: var(--gin-spacing-xs);
/**
* Font Sizes.
*/
--font-size-base: var(--gin-font-size);
--font-size-s: var(--gin-font-size-s);
--font-size-xs: var(--gin-font-size-xxs);
--font-size-xxs: 0.625rem; /* ~10px */
}